Opened 12 years ago
Closed 12 years ago
#4488 closed defect (invalid)
LayoutContainer inside LayoutContainer weirdness
| Reported by: | guest | Owned by: | |
|---|---|---|---|
| Priority: | high | Milestone: | |
| Component: | Dijit | Version: | 0.9 |
| Keywords: | LayoutContainer | Cc: | |
| Blocked By: | Blocking: |
Description
The code below, highly simplified from what I was really trying to do, does not seem to work in either IE7 or Firefox2. It comes closest in Firefox. A blue rectangle (I'll include screen shots) appears for a short time while the page is being laid out and sometimes I can see it when changing window sizes. However, only yellow shows in the end, and that can disappear, never to be found again, if the window shrinks too far and is then enlarged. In IE7, blue appears during layout, but then it disappears and no space is provided.
<html>
<head>
<title></title> <script type="text/javascript" src="../dojoAjax/dojo/dojo.js"
djConfig="isDebug:true,parseOnLoad:true">
</script> <script type="text/javascript" >
dojo.require("dojo.parser"); dojo.require("dijit.layout.LayoutContainer?"); dojo.require("dijit.layout.ContentPane?");
</script>
<style type="text/css">
@import "../dojoAjax/dijit/themes/soria/soria.css";
html, body, #mainDiv {
width: 100%; height: 100%; border: 0; padding: 0; margin: 0; background-color: yellow;
}
</style>
</head> <body class="soria">
<div id="mainDiv" dojoType="dijit.layout.LayoutContainer?">
<div dojoType="dijit.layout.ContentPane?" layoutAlign="top" align="center" style="background-color:green;">
Very top
</div> <div dojoType="dijit.layout.ContentPane?" layoutAlign="bottom" align="center" style="background-color:green;">
Bottom
</div> <div dojoType="dijit.layout.ContentPane?" layoutAlign="right" style="background-color:green;">
Right
</div> <div dojoType="dijit.layout.ContentPane?" layoutAlign="left" style="background-color:green;">
Left
</div> <div dojoType="dijit.layout.LayoutContainer?" layoutAlign="top" style="background-color:blue;">
<div dojoType="dijit.layout.ContentPane?" layoutAlign="right">
Inner right
</div> <div dojoType="dijit.layout.ContentPane?" layoutAlign="left">
Inner left
</div>
</div> <div dojoType="dijit.layout.ContentPane?" layoutAlign="top" align="center" style="background-color:green;">
Less top
</div> <div dojoType="dijit.layout.ContentPane?" layoutAlign="client" style="background-color:red;">
Middle
</div>
</div>
</body>
</html>
Attachments (2)
Change History (3)
Changed 12 years ago by
| Attachment: | LayoutTestFirefox.JPG added |
|---|
comment:1 Changed 12 years ago by
| Resolution: | → invalid |
|---|---|
| Status: | new → closed |
I realize this isn't documented well, but actually this is a problem with the test. Since LayoutContainer? works by placing each of the top/left/bottom/right children, and then giving the layout=client widget the remaining space, it requires that each top/left/bottom/right widget have a computable size. Thus the nested LayoutContainer? needs to have a size specified, like here:
<div dojoType="dijit.layout.LayoutContainer" layoutAlign="top" style="background-color:blue; height: 20px;">
Basically, you always have to specify a size on a layout container, except when the parent layout container sets the size.
Also, when attaching code you should first submit the bug and then use the "attach file" button.
LayoutContainer? in Firefox