It would seem that I don't fully understand the way BorderContainer is suppose to function. I've boiled down my code to what I hope is a short enough example. First the code, then I'll note the issues I am having with this test case.
<style type="text/css">
@import "dojo/dijit/themes/tundra/tundra.css";
@import "dojo/dojo/resources/dojo.css";
</style>
<script type="text/javascript" src="dojo111/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.form.Button");
</script>
<script>
runTest = function()
{
toppane = dijit.byId("top");
toppane.setContent("Now the top pane has content.");
}
</script>
</head>
<body>
<div id="bordercont" dojoType="dijit.layout.BorderContainer" style="width:800px">
<div id="top" dojoType="dijit.layout.ContentPane" region="top">
</div>
<div id="right" dojoType="dijit.layout.ContentPane" region="right">
Some<br>
sample<br>
text<br>
</div>
<div id="center" dojoType="dijit.layout.ContentPane" region="center">
One line
</div>
<div id="bottom" dojoType="dijit.layout.ContentPane" region="bottom">
<button id="testButton" dojoType="dijit.form.Button" onclick="runTest()">
Run the test
</button>
</div>
</div>
</body>
(1) The right pane has content that is 3 lines; the center pane has content that is 1 line. When the page is initially rendered, the height of the center and right panes are only 1 line--the content of the right pane is truncated. Is it required that CSS be defined to set the height of each pane?
(2) If the test button is clicked, the top pane gets updated as expected. But the height of the top pane doesn't get adjusted. Therefore the top pane overlaps with the center and right panes. The idea is that test button is simulating what will eventually be an AJAX call. Since I don't know how much content will come back from the AJAX call, I don't want to set a predefined height for the top pane.
(3) I tried to add code to change the height of the top pane dynamically. Basically I added:
toppane.style.height = '100px';
in the runTest() function. It didn't have any effect; the top pane still overlaps with the other panes.
(4) If I resize the FireFox window displaying the page, all panes but the top pane disappear. If I resize the window again, all content disappears.
(5) I tried to add (properly quoted in < and >):
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"
to the top of the file and to use IE7 to render the page. The page flickers with the initial content briefly, and then goes blank.
Any and all comments, pushes towards documentation that will help would be appreciated.
Thanks.
try giving the BorderContainer a height
in addition to the width