Fit Splitter to the Web Page’s bounds

To create a Splitter that fits to the document’s bounds, you need to set its ‘width’ and ‘height’ properties to ‘100%’ and set also the width and height properties of the web page to ‘100%’. The splitter will automatically adjust its size to fill the document’s bounds and will also we resized when the browser’s window is resized. Here’s the full source code implementation:
<!DOCTYPE html>
<html lang="en">
<meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
<meta name="description" content="This page demonstrates splitter's events" />
<title id='Description'>This demonstration shows how to create a splitter that fits the entire browser window's contents.
<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 () {
$('#splitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '20%', max: 1000, min: 250 }, { size: '80%', max: 2000}] });
<style type="text/css">
html, body
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
<div style="border: none;" id='splitter'>

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.

Leave a Reply