I'm creating a web application that will have multiple panes. I've used some Dojo in the past, but it's too heavy for this project, so I plan to use jQuery Layout instead.
However, I like the way Dojo's BorderContainers allow you to use a "sidebar" design, where the east and west panes are full height, instead of the default north and south panes at full width. Is there a way to use or emulate this look with jQuery Layout?
I have tried nesting a horizontal split layout inside a vertical split layout, but Layout adds so much padding it doesn't look right:
And when I set .ui-layout-pane { padding: 0 } it's even worse:
But if there's a nicer way to remove the padding, that might work too.
Source
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style/lib/jquery-layout/layout-default.css"/>
<link rel="stylesheet" href="style/style.css"/>
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/jquery-ui.min.js"></script>
<script src="js/lib/jquery.layout.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div class="ui-layout-west"></div>
<div class="ui-layout-center">
<div class="ui-layout-center"></div>
<div class="ui-layout-south"></div>
</div>
</body>
</html>
style.css
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body > .ui-layout-pane {
padding: 0;
}
main.js
jQuery(function($) {
$("body").layout({
west: {
size: "20%",
minSize: "10%",
maxSize: "50%",
},
center: {
}
});
$("body > .ui-layout-center").layout({
center: {
},
south: {
size: "10%"
}
});
});
Dev Console Styles
element.style {
position: absolute;
margin: 0px;
left: 215px;
right: 0px;
top: 0px;
bottom: 0px;
height: 1137px;
width: 837px;
z-index: 0;
display: block;
visibility: visible;
overflow: hidden;
}
body > .ui-layout-pane {
padding: 0;
}
.ui-layout-pane {
background: #FFF;
border: 1px solid #BBB;
padding: 10px;
overflow: auto;
}
/* user agent stylesheet */
div {
display: block;
}
/* Inherited from body.ui-layout-container */
body {
font-family: Lucida Grande, Lucida Sans, Geneva, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #EEE;
}
The problem is in your CSS -- in particular the ">" operator -- it means "direct descendants of", and guess what, the inner set of layout frames are not direct descendants.
Change
To
(or leave the "body" out completely) and it would work for you
See working example here