I am just starting out with Dojo and Dijit and have run into a problem with the first thing that I
tried.
I have created a layout with BorderContainer and in Firefox and I.E. the splitter function on the "left" pane
does not work until I re-size the browser (even if I put it back to the size it was before.
In the same directory as dojo, dijit and dojox I have the script at the bottom of this post.
When I refresh the browser and reload the script the re-size handle on the left pane does not work and
it appears that the gutter or border around ALL of the panes is not present until I re-size.
I am running on a 1.2.1 version of the toolkit, the server is linux apache and the clients are Firefox 2 on
linux, Firefox 3 on windows and IE ?? (I am not sure) on Windows.
thanks
-----------------------------------------------
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello World!</title>
<link rel="stylesheet" type="text/css" href="/pwd/dojo/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="/pwd/dojo/dojo/resources/dojo.css" />
<script type="text/javascript" src="/pwd/dojo/dojo/dojo.js"
djConfig="parseOnLoad: true">
</script>
<style>
html, body { height: 100%; width: 100%; }
</style>
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dojo.parser");
dojo.addOnLoad(function() {
var bc = new dijit.layout.BorderContainer({
design : "headline",
style : " width : 100% ;height: 100% "
}, "bc");
var t = new dijit.layout.ContentPane({
region : "top",
style : "background-color:blue;height:100px",
splitter : false,
minSize : 100,
maxSize : 100},document.createElement("div"));
var l = new dijit.layout.ContentPane({
region : "left",
style : "background-color:yellow;width:100px",
splitter : true,
minSize : 100,
maxSize : 300},document.createElement("div"));
var m = new dijit.layout.ContentPane({
region : "center",
},document.createElement("div"));
bc.startup();
bc.addChild(m);
bc.addChild(t);
bc.addChild(l);
});
</script>
</head>
<body class="tundra">
<div id="bc"></div>
</body>
----------------------------------------------------------------------------------------------
Same results on Mac OS 10.5.5
In both Safari and Firefox 3 I get the same results as on Linux and Windows, I must be doing something basic incorrectly.
Got help on irc the proble was calling startup too soon
bc.startup();
bc.addChild(m);
bc.addChild(t);
bc.addChild(l);
needed to be
bc.addChild(m);
bc.addChild(t);
bc.addChild(l);
bc.startup();
Same behavior when adding content to started containers
FYI, If you add (programmatically) a content pane to a border container that has already been started the splitter will be immobile until the browser is resized. I know it's a slightly different case than the original post. calling resize() on the border container after add child resolves the problem.
This dijit test shows the problem:
http://download.dojotoolkit.org/release-1.3.0/dojo-release-1.3.0/dijit/t...
1. click the add left pane button.
2. try to move the splitter, it is won't move.
3. resize the browser.
4. splitter now movable.
See bug: http://trac.dojotoolkit.org/ticket/8469
Hope This Helps,
--Rob