In this post, we will show you how to restrict the dragging range of the Splitter’s Split bar. The example code below, creates a Splitter with two Panels. The important thing in the code is the initialization of the split panels. The first panel’s definition includes setting the ‘size’, ‘min’ and ‘max’ properties. The ‘size’ property specifies the panel’s display size and the ‘min’ and ‘max’ properties specify the panel’s minimum and maximum possible size. The end-user will be able to drag the split bar only in the range between the ‘min’ and ‘max’ properties.
<!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 () { $('#mainSplitter').jqxSplitter({ width: 600, height: 500, panels: [{ size: 150, min: 100, max: 200 }, { size: 450 }] }); }); </script></head><body class='default'> <div id="mainSplitter"> <div>Left Panel</div> <div>Right Panel</div> </div></body></html> 