|
Title: Using Layout to re-arrange page content on browser resize Post by: morib on May 15, 2014, 11:25:53 AM My requirement is to use multiple datagrids on a single page and the maximum space of the browser should be used. To test potential solutions, I created a fiddle project ( http://jsfiddle.net/A54pt/ ) that contains:
<div style="width:100%;height:350px;"> <div class="easyui-layout" style="fit:true;width:100%;height:350px;"> <div data-options="region:'west',split:false, collapsible:false" title="West" style="width:44%"></div> <div data-options="region:'center',title:'Main Title'" style="width:55%"> </div> </div> </div> In this simple test, a Layout with 2 panels is used. The left panel should use about 40% of the screen width while the one on the right should use about 55% of the width. As you can see, it does not work when you resize the browser and the left panel does not use 40% of the width... What am I doing wrong ? Thanks for your assistance. Title: Re: Using Layout to re-arrange page content on browser resize Post by: stworthy on May 15, 2014, 04:58:14 PM Please try this updated example http://jsfiddle.net/A54pt/1/
Title: Re: Using Layout to re-arrange page content on browser resize Post by: morib on May 16, 2014, 09:09:54 AM Very good and thank you ! Now for the next step where I want my datagrid contained within each panel to follow the resizing. Is the best method to invoke the datagrid resize method after the panel resize method? For example
$('#theNameOfMyDatagrid').datagrid('resize',{width: theWidthOfTheParentPanel}); Regards. Title: Re: Using Layout to re-arrange page content on browser resize Post by: stworthy on May 16, 2014, 04:01:08 PM Many layout examples are available from here http://www.jeasyui.com/demo/main/index.php?plugin=Layout&theme=default&dir=ltr&pitem=. They show you how to place components in a layout panel.
|