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>
|