In this post, we will show you how to make jqxSplitter fit to the size of the document’s body.
First you have to add the following HTML to the document’s body:
<div id="splitter"> <div></div> <div></div></div>
This is going to represet the jqxSplitter’s structure.
After that you have to add the following CSS:
<style type="text/css">html, body{ height: 100%; width: 100%; margin: 0px; padding: 0px;}</style>
Don’t forget to include the required JavaScript files – jquery-1.7.1.min.js, jqxcore.js, jqxsplitter.js, and the layout CSS file – jqx.base.css:
<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>
The last step is to initialize the Splitter by using the code below:
<script type="text/javascript"> $(document).ready(function () { $('#splitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '30%', max: 1000, min: 50 }, { size: '70%', max: 2000 }] }); });</script>
In the code above, we are setting the Splitter’s width and height to ‘100%’. After that we are setting the split panels properties. The first panel is with size 30%, max size (which is actually max width because the splitter is vertical) 1000px and min size (min width) 50px. The minimum width of the first split panel could be 50px. The second panel is with size 70% and maximum width 2000px. When the user resizes the browser’s window, the Splitter’s size will automatically grow or shrink.
Here is the source code of the example:
<!DOCTYPE html><html lang="en"><head> <title>jqxSplitter</title> <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: '30%', max: 1000, min: 50 }, { size: '70%', max: 2000 }] }); }); </script> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0px; padding: 0px; } </style></head><body> <div id='splitter'"> <div></div> <div></div> </div></body></html>
