Title: Misalignment of Fields after Multiline Textbox
Post by: poeziafree on March 17, 2022, 12:15:36 AM
Hello
After multiline textbox, the fields get misaligned on resize.
Please help me
Title: Re: Misalignment of Fields after Multiline Textbox
Post by: poeziafree on March 19, 2022, 02:58:07 AM
Hello do you plan to solve this bug?
Title: Re: Misalignment of Fields after Multiline Textbox
Post by: jarry on March 20, 2022, 05:17:19 AM
This is the basic layout example. It works fine. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Layout - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css"> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> <style> .fitem{ padding: 5px 0; } </style> </head> <body class="easyui-layout"> <div region="west" split="true" border="false" style="width:40%;"> <div class="easyui-layout" fit="true"> <div region="north" title="Title1" style="padding:10px;height:500px"> <div class="fitem"> <input class="easyui-textbox" label="Label1" style="width:100%"> </div> <div class="fitem"> <input class="easyui-textbox" label="Label2" style="width:100%"> </div> <div class="fitem"> <input class="easyui-textbox" label="Label3" style="width:100%"> </div> <div class="fitem"> <input class="easyui-textbox" label="Label4" style="width:100%"> </div> <div class="fitem"> <input class="easyui-textbox" label="Label5" style="width:100%"> </div> <div class="fitem"> <input class="easyui-textbox" multiline="true" label="Label6" style="width:100%;height:100px"> </div> <div class="fitem"> <input class="easyui-textbox" label="Label7" style="width:100%"> </div> <div class="fitem"> <input class="easyui-textbox" label="Label8" style="width:100%"> </div> </div> <div region="center"> <div class="easyui-tabs" fit="true" border="false"> <div title="Tab1"></div> <div title="Tab2"></div> </div> </div> </div> </div> <div region="center"> <table class="easyui-datagrid" title="DataGrid" data-options="singleSelect:true,pagination:true,fit:true,border:false"> <thead> <tr> <th data-options="field:'itemid',width:80">Item ID</th> <th data-options="field:'productid',width:100">Product</th> <th data-options="field:'listprice',width:80,align:'right'">List Price</th> <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th> <th data-options="field:'attr1',width:250">Attribute</th> <th data-options="field:'status',width:60,align:'center'">Status</th> </tr> </thead> </table> </div> </body> </html>
Title: Re: Misalignment of Fields after Multiline Textbox
Post by: poeziafree on March 20, 2022, 10:31:39 AM
Hello Jarry,
Thank you...
The example you provided works, yes.
But the problem I described emerges in Window, when I resize the window.
It is also shown in my screenshot.
Thanks
Title: Re: Misalignment of Fields after Multiline Textbox
Post by: jarry on March 20, 2022, 09:24:16 PM
It also works fine in window. Please look at this code. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic Layout - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css"> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script> <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> <style> .fitem{ padding: 5px 0; } </style> </head> <body> <div class="easyui-window" style="width:1000px;height:600px;display:none"> <div class="easyui-layout" fit="true" border="false"> <div region="west" split="true" border="false" style="width:40%;"> <div class="easyui-layout" fit="true"> <div region="north" title="Title1" style="padding:10px;height:500px"> <div class="fitem"> <input class="easyui-textbox" label="Label1" style="width:100%"> </div> <div class="fitem"> <input class="easyui-textbox" label="Label2" style="width:100%"> </div> <div class="fitem"> <input class="easyui-textbox" label="Label3" style="width:100%"> </div> <div class="fitem"> <input class="easyui-textbox" label="Label4" style="width:100%"> </div> <div class="fitem"> <input class="easyui-textbox" label="Label5" style="width:100%"> </div> <div class="fitem"> <input class="easyui-textbox" multiline="true" label="Label6" style="width:100%;height:100px"> </div> <div class="fitem"> <input class="easyui-textbox" label="Label7" style="width:100%"> </div> <div class="fitem"> <input class="easyui-textbox" label="Label8" style="width:100%"> </div> </div> <div region="center"> <div class="easyui-tabs" fit="true" border="false"> <div title="Tab1"></div> <div title="Tab2"></div> </div> </div> </div> </div> <div region="center"> <table class="easyui-datagrid" title="DataGrid" data-options="singleSelect:true,pagination:true,fit:true,border:false"> <thead> <tr> <th data-options="field:'itemid',width:80">Item ID</th> <th data-options="field:'productid',width:100">Product</th> <th data-options="field:'listprice',width:80,align:'right'">List Price</th> <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th> <th data-options="field:'attr1',width:250">Attribute</th> <th data-options="field:'status',width:60,align:'center'">Status</th> </tr> </thead> </table> </div> </div> </div> </body> </html>
|