Hi Bram,
Thanks, I have sorted the
ASP.NET problem but have a follow-up
question.
How to I tell the component to increase height if the text inside
exceeds the current height value? I have been following your simple
example for border layout and when I put a ton of text in the "center"
DIV the text flows out of the container, over the "south" container
and down the rest of the page.
I want the overall height to equal the greatest height of either east,
center, or west (pushing or pulling "south" down or up accordingly).
How do I do that?
Here is my (your) code:
<script type="text/javascript">
jQuery(function($)
{
var container = $('.layout');
function relayout() {
container.layout({resize: false});
}
relayout();
$(window).resize(relayout);
$('.north').resizable({
handles: 's',
stop: relayout
});
$('.south').resizable({
handles: 'n',
stop: relayout
});
$('.east').resizable({
handles: 'w',
stop: relayout
});
$('.west').resizable({
handles: 'e',
stop: relayout
});
});
</script>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow:auto;
}
.layout {
height: 100%;
}
.center, .east, .west, .north, .south {
/*background-color: rgb(220,220,220);*/
border: 1px solid rgb(200,200,200);
text-align: center;
display: inline-block;
}
.west
{
width: 10%;
}
.east
{
width: 20%;
}
.north
{
height: 10%;
}
.south
{
height: 10%;
}
</style>