LayoutContainer
Similar to a layout pane in Java AWT and Delphi, a LayoutContainer is a box with a specified size (like style="width: 500px; height: 500px;"), that contains children widgets marked with "layoutAlign" of "left", "right", "bottom", "top", and "client". It takes it's children marked as left/top/bottom/right, and lays them out along the edges of the box, and then it takes the child marked "client" and puts it into the remaining space in the middle.
Left/right positioning is similar to CSS's "float: left" and "float: right", and top/bottom positioning would be similar to "float: top" and "float: bottom", if there were such CSS.
Note that there can only be one client element, but there can be multiple left, right, top, or bottom elements.
Examples
A Layout Container easily formats a table of contents:

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Layout Container Demo 2</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<style>
/* NOTE: for a full screen layout, must set body size equal to the viewport. */
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
</style>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.LayoutContainer");
</script>
</head>
<body class="tundra">
<div dojoType="dijit.layout.LayoutContainer" style="width: 100%; height: 100%; padding: 0; margin: 0; border: 0;">
<div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color:red">
The Dojo Book
</div>
<div dojoType="dijit.layout.ContentPane" layoutAlign="left"
style="background-color:lightblue;width: 120px;">
Table of Contents
</div>
<div dojoType="dijit.layout.ContentPane" layoutAlign="client"
style="background-color:yellow">
<blockquote><a href="../node/717">Introduction</a>
<ol>
<li><a href="../node/718">Dojo: What is It?</a></li>
<li><a href="../node/719">History</a></li>
<li><a href="../node/733">What Dojo Gives You</a></li>
</ol>
</blockquote>
</div>
</div>
</body></html>
To change the drawing order:
The LayoutContainer goes through the children as specified, and each child is laid out into the "remaining space", where "remaining space" is initially the content area of this widget, but is reduced to a smaller rectangle each time a child is added. So, changing the order of the children will change how they are laid out.

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Layout Container Demo 2</title>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<style>
/* NOTE: for a full screen layout, must set body size equal to the viewport. */
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
</style>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.LayoutContainer");
</script>
</head>
<body class="tundra">
<div dojoType="dijit.layout.LayoutContainer" style="width: 100%; height: 100%; padding: 0; margin: 0; border: 0;">
<div dojoType="dijit.layout.ContentPane" layoutAlign="left"
style="background-color:lightblue;width: 120px;">
Table of Contents
</div>
<div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color:red">
The Dojo Book
</div>
<div dojoType="dijit.layout.ContentPane" layoutAlign="client"
style="background-color:yellow">
<blockquote><a href="../node/717">Introduction</a>
<ol>
<li><a href="../node/718">Dojo: What is It?</a></li>
<li><a href="../node/719">History</a></li>
<li><a href="../node/733">What Dojo Gives You</a></li>
</ol>
</blockquote>
</div>
</div>
</body></html>
dijit.layout.LayoutContainer
Provides Delphi-style panel layout semantics.
|
||
Methods
|
||
addChild(/*Widget*/ child, /*Integer?*/ insertIndex) | Process the given child widget, inserting its dom node as a child of our dom node | |
Widget[] getChildren() | returns array of children widgets | |
Widget getParent() | returns the parent widget of this widget, assuming the parent implements dijit._Container | |
removeChild(/*Widget*/ page) | removes the passed widget instance from this widget but does not destroy it | |
resize(/* Object */ args) | Explicitly set this widget size (in pixels), and then call layout() to resize contents (and maybe adjust child widgets). Args is of form {w: int, h: int, l: int, t: int}. |
- Printer-friendly version
- Login or register to post comments
- Subscribe post
Outside div height
These examples do not work in IE7 at all or resize correctly in Firefox2 setting the LayoutContainer (dojo 0.9) height using %. Use px or em units and the page behaves as described.
---
novery
it is important to rememeber
it is important to rememeber a percentage size is sometimes rather unreliable. i personally avoid percentage sizes on all nodes except direct body descendants, and only then when i've set the width and height of html,body { } to 100%
really slow :-(
Hi all,
I don't know if you all faced this problem or not.
When I add the above mentioned code and then access it, components show up as if it were one after the other, something like the following:
Top Section
Left Section
Content Section
After less than a sec, the page organizes properly. But for a second it looks really bad. Any suggestions as to what should I while page is loading properly?
Thanks,
Pankaj
hide
You can hide the page contents until everything is parsed, like themeTester.html does.
I have the same issue.
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.8) Gecko/20071022 Ubuntu/7.10 (gutsy) Firefox/2.0.0.8
I have the same question about it as pankajvishwani
Resizing problems with LayoutContainer children "top", "client"
Hi, I have a LayoutContainer with some children of type ContentPane. The content of the "top" child can change its size (kind of closed/disclosed behaviour...). Alas, the "client" child isn't resized automatically (i.e. a blank area between the two children appears if the "top" child closes or their contents overlap when it discloses). If I let the browser (tested in Firefox 2 and IE6) re-render the page (e.g. by resizing the browser window) then everything is fine again (until the next close/disclose event...).
Is there any (clean) way to tell the "client" child that it has to resize? Or is this just a bug and this should have happened automatically?
Thanks, Carsten
this code generates errors
Using Dojo version 1.0.1 (11616), and with the above code essentially copied and pasted (changing the url's to the various dojo pieces, of course) the two column layout fails and the following errors occur:
My browser is Firefox 2.0.0.11 on Mac OS X 10.4.11
hmm
Hmm, it's working for me. There's no reason to change the urls at all, since it's downloading off of the edge server. I just cut/pasted the text above and brought it up (I tree FF2 win) and it worked fine.
Scrolling
Is there a way to enable scrolling for the left/top/bottom/right elements?
I have a contentpane that just don't fit in the left position and the scrolling is never activated here.
For my client element the scrolling works just perfect.
CSS
Just use CSS to set the width of the side panels, or the height of the top/bottom panels. Ex: <div style="height: 100px">.
Re : CSS
Thanks for the answer, but what I'm looking for here is scrolling. I have a fixed space for my widget, so the content of it needs to be scrollable.
yes
Yes, scrolling is a built in ability in browsers. If a node has too much data to display in the defined height then it will display a scroll bar. This is controlled by the overflow CSS property but the default value of that property is overflow: auto which adds scroll bars when needed. Try googling for "CSS overflow" or something like that.
overflow:scroll
Thanks Bill! This actually solved some other problems as well!
Hope the santa is good to you this year, I will try to convince him to give you a bigger present than planned :)
IE, LayoutContainer and height
I have a question.
In IE LayoutContainers do not render if no CSS height is specified for it. But then again, if u specify it, then it's fixed size and eventually scrollbars will appear. 100% height also doesn't seems to render well on IE7 for my code.
This is a short part of my code, which fails to render under IE7, but ofc works perfectly under FF2:
<div dojoType="dijit.layout.LayoutContainer" id="edu-top">
<div dojoType="dijit.layout.ContentPane" layoutAlign="left" id="edu-top-logo">
LOGO
</div>
<div dojoType="dijit.layout.ContentPane" layoutAlign="client" id="edu-top-reclama">
RECLAMA
</div>
</div>
and the CSS for it:
#edu-top { border:1px solid red; background:lightblue; height:100%; }
#edu-top-logo { width:200px; height:30px; }
#edu-top-reclama { width:780px; height:30px; }
Any ideas ? thanks!