jQuery Splitter

Set the height property of the jqxSplitter. Author: http://jqwidgets.com

by rao kantipudi

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxSplitter'>
  <div style="background-color: #97FFAF"></div>
  <div style="background-color: #E8C0AF">
    <div id='vSplitter'>
      <div style="background-color: #88C0AF"></div>
      <div>
        <div style="background-color: #CCC0AF"></div>
        <div class="bPanel" style="background-color: #CDC0AF">
          <input type="button" value="save">
          <input type="button" value="cancel">
        </div>
      </div>

    </div>
  </div>
</div>

CSS

.bPanel {
  position: fixed;
  bottom: -6px;
  width: 100%;
  background-color: white;
  margin-bottom: 6px;
  padding-top: 9px;
  margin-top: 15px;
  padding-bottom: 6px;
  padding-left: 30px;
  border-top: 3px solid rgba(0, 0, 0, 0.1);
}

;

JavaScript

$("#jqxSplitter").jqxSplitter({
  width: '600px',
  height: '600px'
});

$("#vSplitter").jqxSplitter({
  width: '100%',
  height: '100%',
  orientation: 'horizontal'
});