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)

LayoutTestFirefox.JPG (76.6 KB) - added by guest 12 years ago.
LayoutContainer? in Firefox
LayoutTestIE7.JPG (55.0 KB) - added by guest 12 years ago.
LayoutContainer? in IE7

Download all attachments as: .zip

Change History (3)

Changed 12 years ago by guest

Attachment: LayoutTestFirefox.JPG added

LayoutContainer? in Firefox

Changed 12 years ago by guest

Attachment: LayoutTestIE7.JPG added

comment:1 Changed 12 years ago by bill

Resolution: invalid
Status: newclosed

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.

Note: See TracTickets for help on using tickets.