EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: mzeddd on April 26, 2013, 05:04:06 AM



Title: tabs in layout
Post by: mzeddd on April 26, 2013, 05:04:06 AM
I have layout with "North", "Center", "South" and "East" panels
"Center" panel does not have "title". Instead I'm defining extra panel like this:

Code:
<div class="easyui-panel" title="Reports" border="false" fit="true" style="padding:1px;">
<form id="myForm">
<table>
<tr>
<td><a href="javascript:void(0)" class="easyui-linkbutton" >Show</a></td>
<td><a href="javascript:void(0)" class="easyui-linkbutton" >Export</a></td>
</tr>
</table>
</form>
<div id="myTabs" class="easyui-tabs" fit="true" plain="true">
<div title="tab1" style="padding:10px"></div>
<div title="tab2" style="padding:10px"></div>
</div>
</div>

But when I load something big into "tab1" or "tab2" to let scroll bars appear I could not see bottom lines of loaded content.

This happens possible because the height of tabs panel is calculated in accourdance with height of parent panel without taking into account height of "myForm".
So, this shifts tabs down.

Is it possible to fix that without fixed height definition?


Title: Re: tabs in layout
Post by: stworthy on April 27, 2013, 08:31:56 PM
Try using nested layout.
Code:
<div class="easyui-panel" title="Reports" border="false" fit="true" style="padding:1px;">
<div class="easyui-layout" fit="true">
<div region="north">
<form id="myForm">
<table>
<tr>
<td><a href="javascript:void(0)" class="easyui-linkbutton" >Show</a></td>
<td><a href="javascript:void(0)" class="easyui-linkbutton" >Export</a></td>
</tr>
</table>
</form>
</div>
<div region="center">
<div id="myTabs" class="easyui-tabs" fit="true" plain="true">
<div title="tab1" style="padding:10px"></div>
<div title="tab2" style="padding:10px"></div>
</div>
</div>
</div>
</div>


Title: Re: tabs in layout
Post by: mzeddd on April 28, 2013, 12:08:00 AM
Thanks! I'll do this way.

BTW, Is it possible to add possibility in next versions of EasyUI to have "tools" panel like in DataGrid for example?


Title: Re: tabs in layout
Post by: stworthy on April 28, 2013, 05:03:44 AM
Here is another solution that is not using layout.
Code:
	<div class="easyui-panel" style="width:700px;height:350px;padding:1px" data-options="
onResize:function(){
$(this).find('div.cc')._outerWidth($(this).width())
._outerHeight($(this).height()-50)
.children('div').triggerHandler('_resize');
}
">
<div style="height:50px">
<form id="myForm">
<table>
<tr>
<td><a href="javascript:void(0)" class="easyui-linkbutton" >Show</a></td>
<td><a href="javascript:void(0)" class="easyui-linkbutton" >Export</a></td>
</tr>
</table>
</form>
</div>
<div class="cc">
<div id="myTabs" class="easyui-tabs" fit="true" plain="true">
<div title="tab1" style="padding:10px"></div>
<div title="tab2" style="padding:10px"></div>
</div>
</div>
</div>