Title: layout with fitted tabs
Post by: Coder on August 22, 2019, 05:58:47 PM
this code look good: <div id="cc" class="easyui-layout" style="width:100%;height:100%">
<div data-options="region:'south',title:'Detail',split:true, hideCollapsedContent:false" style="height:50%">
<div id="tabsA" class="easyui-tabs" fit="true"
...
</div>
</div>
<div data-options="region:'center',title:'Items'" style="padding:5px">
<table id="dgA" title="" fit="true" class="easyui-datagrid">
....
</table>
</div>
</div>
but if insert div before tabs - didnt visible bottom of tabs: <div id="cc" class="easyui-layout" style="width:100%;height:100%">
<div data-options="region:'south',title:'Detail',split:true, hideCollapsedContent:false" style="height:50%">
<div class="easyui-panel" style="padding:5px;">
<div class="btn-sep" id="menuA"> Menu:</div>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ui-radio-on" plain="true" onclick="btnActivate()">activate</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ui-radio-off" plain="true" onclick="btnDeactive()">deactivate</a>
</div>
<div id="tabsA" class="easyui-tabs" fit="true"
...
</div>
</div>
<div data-options="region:'center',title:'Items'" style="padding:5px">
<table id="dgA" title="" fit="true" class="easyui-datagrid">
....
</table>
</div>
</div>
how to fix it? or how to add shared menu panel to easyui-tabs?
Title: Re: layout with fitted tabs
Post by: stworthy on August 22, 2019, 06:51:41 PM
The 'fit:true' property will make the tabs full fill its parent container. Remove it and use this code instead. <div data-options="region:'south',title:'Detail',split:true, hideCollapsedContent:false" style="height:50%">
<div class="easyui-panel" style="padding:5px;height:50%">
<div class="btn-sep" id="menuA"> Menu:</div>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ui-radio-on" plain="true" onclick="btnActivate()">activate</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ui-radio-off" plain="true" onclick="btnDeactive()">deactivate</a>
</div>
<div id="tabsA" class="easyui-tabs" style="height:50%">
...
</div>
</div>
Title: Re: layout with fitted tabs
Post by: Coder on August 22, 2019, 07:47:44 PM
thnx to Your answer
in parent of id="menuA" i can set height to 42px,
how set id="tabsA" to "100% - 42px" ?
|