EasyUI Forum
March 28, 2024, 11:05:03 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Misalignment of Fields after Multiline Textbox  (Read 3882 times)
poeziafree
Jr. Member
**
Posts: 69


View Profile Email
« on: March 17, 2022, 12:15:36 AM »

Hello

After multiline textbox, the fields get misaligned on resize.

Please help me
Logged
poeziafree
Jr. Member
**
Posts: 69


View Profile Email
« Reply #1 on: March 19, 2022, 02:58:07 AM »

Hello
do you plan to solve this bug?
Logged
jarry
Administrator
Hero Member
*****
Posts: 2260


View Profile Email
« Reply #2 on: March 20, 2022, 05:17:19 AM »

This is the basic layout example. It works fine.
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 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>
Logged
poeziafree
Jr. Member
**
Posts: 69


View Profile Email
« Reply #3 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
Logged
jarry
Administrator
Hero Member
*****
Posts: 2260


View Profile Email
« Reply #4 on: March 20, 2022, 09:24:16 PM »

It also works fine in window. Please look at this code.
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>
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!