How do I create a “sidebar” layout with jQuery Layout?
Question
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;
}
1 answers
solution1
0 ACCPTED 2015-09-03 18:27:29
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
body > .ui-layout-pane {
padding: 0;
}
To
body .ui-layout-pane {
padding: 0;
}
(or leave the "body" out completely) and it would work for you
See working example here
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.