In this post, we will illustrate you how to create a web page with nested splitters that adjust their size to fill the bounds of the browser window. The sample has one horizontal splliter with three split panels – ‘North’, ‘Center’ and ‘South’. There’s another vertical splitter added to the ‘Center’ panel and it has three additional split panels – ‘East’, ‘West’ and ‘Center’. To make the ‘container’ Splitter fit to the page’s bounds, we need to set its ‘width’ and ‘height’ properties to ‘100%’. We don’t have to set the ‘height’ and ‘width’ properties of the nested splitter, because these settings are set by the ‘container’ splitter. We only need specify the size of the split panels.
The source code is shown below:
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#container').jqxSplitter({ width: '100%', height: '100%', orientation: 'horizontal', panels: [{ size: 200 }, { size: 300}] }); $('#nested').jqxSplitter({ panels: [{ size: 150 }, { size: 300 }] }); }); </script> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0px; padding: 0px; overflow: hidden; } </style></head><body class='default'> <div id="container"> <div class="splitter-panel"> North </div> <div class="splitter-panel" id="nested"> <div class="splitter-panel"> West </div> <div class="splitter-panel" id="secondNested"> Center </div> <div class="splitter-panel"> East </div> </div> <div class="splitter-panel" id="thirdNested"> Sourth </div> </div></body></html>
