So basically I have a jqxSplitter as a container with fixed sizes. On the left side should be 2 jqxExpanders of which the lower one should contain a jqxTree. This works so far except:
As I set the Height of the second expander to 100% it expands above the borders of the Splitter. I cant use auto for its size since then the Tree won't show.
So, how can I make the second expander use all the remaining space, without going off borders?
Heres my code so far, its quite long, but only because I gave the tree a lot of items to check scrollbar behavior, i figure I just let it in if you want to try it.
<html>
<head>
<link rel="stylesheet" href="../jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css"/>
<script type="text/javascript" src="../jqwidgets/scripts/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../jqwidgets/jqwidgets/jqxsplitter.js"></script>
<script type="text/javascript" src="../jqwidgets/jqwidgets/jqxexpander.js"></script>
<script type="text/javascript" src="../jqwidgets/jqwidgets/jqxtree.js"></script>
<script type="text/javascript" src="../jqwidgets/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../jqwidgets/jqwidgets/jqxpanel.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// Create jqxSplitter
$("#jqxSplitter").jqxSplitter({
width: 1000,
height: 500
});
// Create jqxExpanders
$("#jqxexpander1").jqxExpander({
width: 'auto',
height: 'auto'
});
$("#jqxexpander2").jqxExpander({
width: '100%',
height: '100%',
initContent: function () {
// Create jqxTree
$('#jqxTree').jqxTree({
width: '99%',
height: '99%'
});
}
});
});
</script>
</head>
<body>
<div id='jqxSplitter'>
<div>
<div id='jqxexpander1'>
<!--Header-->
<div>
Header</div>
<!--Content-->
<div>
Content
</div>
</div>
<div id='jqxexpander2' style="bottom: 0px">
<!--Header-->
<div>
Header</div>
<!--Content-->
<div>
<div id='jqxTree' style="border-style: none">
<ul>
<li>User
<ul>
<li>Info
<ul>
<li>Info 1</li>
<li>Info 2</li>
</ul>
</li>
<li>Documents
<ul>
<li>Document 1</li>
<li>Document 2</li>
<li>Document 1</li>
<li>Document 2</li>
<li>Document 1</li>
<li>Document 2</li>
<li>Document 1</li>
<li>Document 2</li>
<li>Document 1</li>
<li>Document 2</li>
<li>Document 1</li>
<li>Document 2</li>
</ul>
</li>
<li>More Documents
<ul>
<li>Document 1</li>
<li>Document 2</li>
<li>Document 3</li>
<li>Document 4</li>
<li>Document 5</li>
<li>Document 6</li>
<li>Document 7</li>
<li>Document 8</li>
<li>Document 9</li>
<li>Document 10</li>
<li>Document 11</li>
<li>Document 12</li>
<li>Document 13</li>
<li>Document 14</li>
<li>Document 15</li>
<li>Document 16</li>
<li>Document 17</li>
<li>Document 18</li>
<li>Document 19</li>
<li>Document 20</li>
<li>Document 21</li>
<li>Document 22</li>
<li>Document 23</li>
<li>end</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div></div>
</div>
</body>
</html>
