This is my first try at Dojo using Zend Framework too. I'm trying to start a new layout with the BorderContainer and use the tundra theme. For some reason when the page loads you briefly see the HTML contents then it disappears. However, when I comment out the theme CSS file it shows up correctly from what I can tell. I've tried to search for this issue with no success. Any ideas? Thanks
This is very confusing to
This is very confusing to me. The demo on the doc's don't even work. Has anyone got BorderContainer to work when applying a theme? Thanks for any help!
The most common issue that
The most common issue that causes this is a lack of a size on the parent node.
You likely want to set
in your css, else the border container will not stretch to occupy all the available space. The same should be applied to the borderContainer node itself, style="height:100%; width:100%" if you are aiming for a full page layout. Top-level layout widgets require an explicit size.
Hope this helps.
Regards-
Peter Higgins
Arg, tried that. Here is
Arg, tried that. Here is what I have. I plan on using the theme later on with other digits. But I'd also like to make the side nav adjustable once I get this problem worked out.
[code]
<style type="text/css">
<!--
@import "http://o.aolcdn.com/dojo/1.1.1/dijit/themes/tundra/tundra.css";
-->
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js"></script>
<script type="text/javascript">
//<![CDATA[
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dojo.parser");
dojo.addOnLoad(function() {
dojo.forEach(zendDijits, function(info) {
var n = dojo.byId(info.id);
if (null != n) {
dojo.attr(n, dojo.mixin({ id: info.id }, info.params));
}
});
dojo.parser.parse();
});
var zendDijits = [{"id":"menuPane","params":{"region":"top","dojoType":"dijit.layout.ContentPane"}},{"id":"navPane","params":{"region":"left","dojoType":"dijit.layout.ContentPane"}},{"id":"mainPane","params":{"region":"center","dojoType":"dijit.layout.ContentPane"}},{"id":"statusPane","params":{"region":"bottom","dojoType":"dijit.layout.ContentPane"}},{"id":"masterLayout","params":{"design":"headline","dojoType":"dijit.layout.BorderContainer"}}];
//]]>
</script>
<title>Test</title>
<style type="text/css" media="screen">
<!--
body, html { width:100%; height:100%; }
-->
</style>
</head>
<body class="tundra">
<div id="masterLayout">
<div style="background-color: darkblue;" id="menuPane">This is the menu pane</div>
<div style="width: 200px; background-color: lightblue;" id="navPane">This is the navigation pane</div>
<div style="background-color: white;" id="mainPane">This is the main content pane area</div>
<div style="background-color: lightgray;" id="statusPane">Status area</div>
</div>
</body>
[/code]
#masterLayout needs an
#masterLayout needs an explicit size.
<style type="text/css">
<!--
@import "http://o.aolcdn.com/dojo/1.1.1/dijit/themes/tundra/tundra.css";
-->
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js"></script>
<script type="text/javascript">
//<![CDATA[
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dojo.parser");
dojo.addOnLoad(function() {
dojo.forEach(zendDijits, function(info) {
var n = dojo.byId(info.id);
if (null != n) {
dojo.attr(n, dojo.mixin({ id: info.id }, info.params));
}
});
dojo.parser.parse();
});
var zendDijits = [{"id":"menuPane","params":{"region":"top","dojoType":"dijit.layout.ContentPane"}},{"id":"navPane","params":{"region":"left","dojoType":"dijit.layout.ContentPane"}},{"id":"mainPane","params":{"region":"center","dojoType":"dijit.layout.ContentPane"}},{"id":"statusPane","params":{"region":"bottom","dojoType":"dijit.layout.ContentPane"}},{"id":"masterLayout","params":{"design":"headline","dojoType":"dijit.layout.BorderContainer"}}];
//]]>
</script>
<title>Test</title>
<style type="text/css" media="screen">
<!--
body, html { width:100%; height:100%; margin:0; padding:0;}
#masterLayout { width:100%; height:100%;}
-->
</style>
</head>
<body class="tundra">
<div id="masterLayout">
<div style="background-color: darkblue;" id="menuPane">This is the menu pane</div>
<div style="width: 200px; background-color: lightblue;" id="navPane">This is the navigation pane</div>
<div style="background-color: white;" id="mainPane">This is the main content pane area</div>
<div style="background-color: lightgray;" id="statusPane">Status area</div>
</div>
</body>
Yep, that was it. The
Yep, that was it. The splitter even works. Thanks!