dijit.layout.BorderContainer¶
| Authors: | Becky Gibson, Bill Keese, Nikolai Onken, Marcus Reimann |
|---|---|
| Developers: | ?- |
| Available: | since V.2 |
This widget is a container partitioned into up to five regions: left (or leading), right (or trailing), top, and bottom with a mandatory center to fill in any remaining space. Each edge region may have an optional splitter user interface for manual resizing.
Usage¶
Regions¶
Each child element must have an attribute “region” which indicates where it should be positioned (most names are self explainatory):
- top
- bottom
- right
- left
- center
- leading: used have flexible layout in left-to-right/right-to-left environments. In ltr, it will be equivalent to left, in rtl equivalent to right
- trailing: opposite of ‘leading’: right in ltr, left in rtl
There can be multiple widgets for each region, in which case their order (i.e. closeness to the edge of the BorderContainer) is controlled by their relative layoutPriority settings.
There must always be one region marked ‘center’.
Setting sizes¶
Sizes are specified for the edge regions in pixels or percentage using CSS – height for top and bottom and width for the sides. You might specify a top region of height:100px and a left region of width:50%. The center must not have any dimensions specified in CSS as it resizes automatically to fill the remaining space. Do not set the width of the top/bottom panes or the height of the left/right panes as that would be meaningless.
Besides setting the size of the BorderContainer itself, you generally need to set the width of the leading and trailing (left and the right) panes. You shouldn’t need to set the height of the top/bottom panes as that can be determined automatically.
note: In order to set the overall size of a BorderContainer to the full size of the viewport, the <body> element needs an explicit size set as well as a size on the BorderContainer itself:
1 2 3 4 | <style type="text/css">
body, html { width:100%; height:100%; margin:0; padding:0; overflow:hidden; }
#borderContainer { width:100%; height:100% }
</style>
|
Otherwise, the computed style of the BorderContainer will report 0 rather than the browser-calculated size of the viewport.
Layout modes¶
BorderContainer operates in a choice of two layout modes: the design attribute may be set to "headline" (by default) or "sidebar". With the "headline" layout, the top and bottom sections extend the entire width of the box and the remaining regions are placed in the middle. With the "sidebar" layout, the side panels take priority, extending the full height of the box.
However, the layoutPriority setting for child panes overrides the design attribute on the BorderContainer. In other words, if the top and bottom sections have a lower layoutPriority then the left and right panes then the top and bottom panes will extend the entire width of the box.
Examples¶
Declarative example¶
Lets specify a simple BorderContainer with a left and center region
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
</script>
The markup has to look as follows
Using layoutPriority¶
This example uses layoutPriority to include two left panes in one BorderContainer:
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
</script>
<div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="true" liveSplitters="true" id="layoutPriorityBorderContainer">
<div dojoType="dijit.layout.ContentPane" splitter="true" region="leading" layoutPriority="1" style="width: 100px;">Left #1</div>
<div dojoType="dijit.layout.ContentPane" splitter="true" region="leading" layoutPriority="2" style="width: 100px;">Left #2</div>
<div dojoType="dijit.layout.ContentPane" splitter="true" region="center">Hi, I'm center</div>
</div>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
overflow:hidden;
}
#layoutPriorityBorderContainer {
width: 100%;
height: 100%;
}
</style>
Nested Layout Widgets¶
Lets take a look at a more advanced example of using BorderContainer and other layout widgets. This example uses two BorderContainers to allow to, left and right content areas. Note the tabStrip attribute on the TabContainer.
BorderContainer Inside A Dijit Template¶
You can use a BorderContainer inside your own dijit template with a bit of care to call startup() on your dijit after it has been added to the DOM, so that its contained BorderContainer can lay itself out.
Accessibility¶
Keyboard¶
| Action | Key |
|---|---|
| Navigate to splitters for resizable regions | tab - all resizable splitters are in the tab order |
| Change the size of a vertical region | left / right arrows to decrease and increase |
| Change the size of a horizontal region | down / up arrows to decrease and increase |
Note: The children of BorderContainer must be created in the source code in their natural tab order. Header regions should be first and footer regions last. In Left to right locales, left regions before center and right ones.