Title: [SOLVED] Inner Nested Layouts
Post by: don on August 16, 2017, 05:37:12 AM
Inner nested (child) layouts don't seem to collapse and resize like a parent layout. In my case I would like the map east and west regions to be collapsible and resizable. I am new to EasyUI so I might be misunderstanding something basic, any suggestions? <body>
<div id="rootLayout" class="easyui-layout" data-options="fit:true">
<div data-options="region:'north'" style="height:50px;padding:10px 10px">
<a id="mapToggle" class="easyui-linkbutton" data-options="toggle:true,selected:true" style="width:80px">Map</a>
<a id="timeToggle" class="easyui-linkbutton" data-options="toggle:true,selected:true" style="width:80px">Time</a>
<a id="messageToggle" class="easyui-linkbutton" data-options="toggle:true" style="width:80px">Messages</a>
<a id="userMenu" class="easyui-menubutton" data-options="menu:'#mm1'" style="width:80px;float:right">Menu</a>
</div>
<div id="mapPanel" data-options="region:'west',split:true" style="width:50%">
<div id="mapLayout" class="easyui-layout" data-options="fit:true">
<div data-options="region:'west',collapsible:true" style="width:180px;">map west</div>
<div data-options="region:'center'" >map center</div>
<div data-options="region:'south'" >map south</div>
<div data-options="region:'east',collapsible:true" style="width:180px;">map east</div>
</div>
</div>
<div id="timePanel" data-options="region:'center'" style="width:50%">
<div id="timeLayout" class="easyui-layout" data-options="fit:true">
<div data-options="region:'west',split:true,collapsible:true" style="width:180px;"></div>
<div data-options="region:'center'" ></div>
<div data-options="region:'south'" ></div>
<div data-options="region:'east',split:true,collapsible:true" style="width:180px;"></div>
</div>
</div>
<div id="messagePanel" data-options="region:'east',split:true,closed:true">
Right Content
</div>
</div>
<!--User Menu-->
<div id="mm1" style="width:100px;">
<div>Load</div>
<div>Save</div>
<div>Login</div>
<div>About</div>
</div>
<!--************************************************ Begin Javascript Includes ******************************************************-->
<!--JavaScript Reference Libraries-->
<script src="./libs/easyui/jquery.easyui.min.js"></script>
</body>
Title: Re: Inner Nested Layouts
Post by: jarry on August 16, 2017, 07:50:50 PM
A collapsible panel must has the header, please set the 'title' property to let the header displays. <div id="mapLayout" class="easyui-layout" data-options="fit:true">
<div data-options="region:'west',title:'map west',collapsible:true" style="width:180px;">map west</div>
<div data-options="region:'center'" >map center</div>
<div data-options="region:'south'" >map south</div>
<div data-options="region:'east',title:'map east',collapsible:true" style="width:180px;">map east</div>
</div>
|