EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: poeziafree on February 01, 2023, 01:21:38 PM

Title: Viewport Resize Causes Issues in Fluid Texbox
Post by: poeziafree on February 01, 2023, 01:21:38 PM

Hello,

I have two fluid textboxes aligned horizontally.

Resize of viewport/parent causes issues with the width of the textbox.

Please see the example and the screenshot below: http://jsfiddle.net/ogszh82p/2/

Screenshot: https://paste.pics/LBVU7

What could be the problem?

Thanks

Title: Re: Viewport Resize Causes Issues in Fluid Texbox
Post by: jarry on February 02, 2023, 02:01:19 AM

Please try this code.

Code:

<div class="f-row">
	<input class="easyui-textbox" label="Test1:" style="width: 100%;">
	<input class="easyui-textbox" label="Test2:" style="width: 100%;">
</div>

Title: Re: Viewport Resize Causes Issues in Fluid Texbox
Post by: poeziafree on February 02, 2023, 02:49:30 AM

Thanks, Jarry!

In this case, on resizing the viewport, the first textbox inner typable area is smaller than the second one.

See the screenshot: the selected area with the red arrow shows that this area is not typable.

Screenshot: https://snipboard.io/736zEe.jpg

The issue is even worse, if there is a button enabled on the first textbox: https://snipboard.io/Tz5tqN.jpg

Title: Re: Viewport Resize Causes Issues in Fluid Texbox
Post by: jarry on February 02, 2023, 08:46:01 PM

Please call this enhanced code instead.

Code:

<div class="f-row">
	<div style="flex:1;margin-right: 20px;">
		<input class="easyui-textbox" label="Test1:" style="width: 100%;">
	</div>
	<div style="flex:1;margin-left: 20px;">
		<input class="easyui-textbox" label="Test2:" style="width: 100%;">
	</div>
</div>