Print Page - dynamic resize

When I setup an easyui layout I set the height and width to 100% but when I resize the browser the layout stays the same size as it was when the browser window was opening? Does it support dynamic resize?

_{<div class="easyui-layout" data-options="fit:true" style="width:800px; height:200px;">
           <div data-options="region:'north'" style="height:50px">

           </div>
           <div data-options="region:'west',split:true" title="West" style="width:180px;">
           </div>
           <div data-options="region:'center'" style="width:75%;">

           <div id="tt" class="easyui-tabs" style="width:400px; height:200px;">
                 <div title="Orders" id="ordersTab" style="">
                 <table class="easyui-datagrid" style="width:800px; height:200px;"
                          data-options="url:'datagrid_data1.json',method:'get',fit:true">
                          <thead>
                          <tr>
                          <th data-options="field:'orderId'" width="80">OrderId</th>
                          <th data-options="field:'symbol'" width="100">Symbol</th>
                          <th data-options="field:'price',align:'right'" width="80">Price</th>
                          <th data-options="field:'side',align:'right'" width="80">Buy/Sell</th>
                          <th data-options="field:'status',align:'center'" width="50">Status</th>
                          <th data-options="field:'account',align:'center'" width="50">Account</th>
                          <th data-options="field:'swap',align:'center'" width="50">Swap</th>
                          <th data-options="field:'text'" width="150">Text</th>
                          </tr>
                          </thead>
                          </table>
                 </div>
                 <div title="History" data-options="" style="overflow:auto;padding:20px;display:none;">
                 tab2
                 </div>
               </div>
               <div data-options="region:'south',split:true" style="height: 20px;">
           </div>

           </div>
           </div>}

When set 'fit' property to true, the layout will auto full fill its parent container. Try this code:

Code:

<body>
<div class="easyui-layout" fit="true">
	<div data-options="region:'north',border:false" style="height:60px;"></div>
	<div data-options="region:'west',split:true,title:'West'" style="width:150px;"></div>
	<div data-options="region:'south',border:false" style="height:50px;"></div>
	<div data-options="region:'center',title:'Center'"></div>
</div>
</body>

Code:

<body class="easyui-layout">
	<div data-options="region:'north',border:false" style="height:60px;"></div>
	<div data-options="region:'west',split:true,title:'West'" style="width:150px;"></div>
	<div data-options="region:'south',border:false" style="height:50px;"></div>
	<div data-options="region:'center',title:'Center'"></div>
</body>

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: cuthbe on January 03, 2014, 01:21:42 AM