Nested Splitters with Auto Size behavior

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">
<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 }] });
<style type="text/css">
html, body
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
<body class='default'>
<div id="container">
<div class="splitter-panel">
<div class="splitter-panel" id="nested">
<div class="splitter-panel">
<div class="splitter-panel" id="secondNested">
<div class="splitter-panel">
<div class="splitter-panel" id="thirdNested">

About admin

This entry was posted in JavaScript, JavaScript Plugins, JavaScript UI, JavaScript UI Plugins, JavaScript UI Widgets, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxSplitter and tagged , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Comments are closed.