I'm trying to get a simple vertical splitter bar working using jQuery UI Layout 1.30.0.3079-rc. Here is my test page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery UI Layout Vertical Splitter</title>
<link type="text/css" rel="stylesheet" href="../Content/jquery.ui.layout.css" />
<style type="text/css">
body {
font-family: Calibri;
font-size: 11pt;
margin: 0px;
}
.RequiredBorder {
border: 3mm solid silver;
margin: 3mm;
padding: 3mm;
}
.ui-layout-center, .ui-layout-east, .ui-layout-west, .ui-layout-north, .ui-layout-south {
border: 1px solid purple;
}
#SplitContainer {
border: 1px solid blue;
}
</style>
<script type="text/javascript" src="../Scripts/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery-ui-1.8.23.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery.layout.min.js"></script>
<script type="text/javascript">
var myLayout;
$(document).ready(function () {
myLayout = $('#SplitContainer').layout({
center__minWidth: 100,
west__minSize: 100,
west__size: .5, // 50% of layout width
stateManagement__enabled: false
});
});
</script>
</head>
<body>
<div class="RequiredBorder">
<div id="SplitContainer">
<div class="ui-layout-west">
LEFT
<ul>
<li>Node 1</li>
<li>Node 2
<ul>
<li>Node 2.1</li>
<li>Node 2.2
<ul>
<li>Node 2.2.1</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="ui-layout-center">
RIGHT
<p>
<input type="text" value="Text 1" />
</p>
<p>
<input type="text" value="Text 2" />
</p>
</div>
</div>
</div>
</body>
</html>
I want the two content divs to stretch to fill the container horizontally, but stretch to fill their content vertically.
The div widths work exactly as desired, but the heights are always zero pixels unless I hardcode the height in the CSS, e.g.
#SplitContainer {
height: 400px;
}
Hardcoding the height is not an acceptable solution. In the real website, the contents of these divs could be anything from a small fraction of the window height to several multiples of it, and the <div class="RequiredBorder"> div must enclose the whole lot and size to content.
I have read through the jQuery UI Layout documentation and searched on Google, but I haven't found anything useful so far. Things I have already tried that didn't work:
#SplitContainer {
display: inline-block;
}
This renders the container and all its contents with zero width and height.
#SplitContainer {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}
This renders the container and all its contents filling the entire browser window, overlaying the rest of the content.
The demo pages on the jQuery UI Layout website do not exhibit this problem because they all put the outermost layout directly inside the <body> element. When I tried that in my page, it did work correctly. However, the real website will have to enclose the layout in a nested <div>.
I am testing this page in IE 11 and Firefox 29. Both exhibit exactly the same behaviour.
