Dojo's nested BorderContainer disappear in IE
-
06-07-2021 - |
Question
I have this terrible problem with IE 7/8/9.
I wrote an app using Dojo toolkit 1.8.0
and Play! framework
. It works fine in all browser except for IE. Its 'developers tools' show no error, so does firebug. The problematic code section is here:
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'">
<div data-dojo-type="dijit.layout.ContentPane" id="head" region="top">
</div>
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region: 'center'">
<div data-dojo-type="dijit.layout.ContentPane" id="menu" region="left">
</div>
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region: 'center'">
<div data-dojo-type="dijit.layout.ContentPane" id="content_1" region="top">
</div>
<div data-dojo-type="dijit.layout.ContentPane" id="content_2" region="bottom">
</div>
</div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" id="foot" region="bottom">
</div>
</div>
The result, in all browsers except for IE is like that:
But in IE it is shown like that:
Can anyone explain why there are such differences? At first I thought that in IE content is hidden, so I set overflow: auto
, but no scrollbar appeared after page load.
Solution 2
The problem was with my custom class added to .menu
element:
.menu {
margin-right: auto;
margin-left: auto;
}
This 2 styles broke my whole layout -.- When I removed it, it started to display properly.
OTHER TIPS
two possible reasons come to mind:
you don't have a 'center' element for the content container - afaik, the dojo spec requires one BorderContainerChild with
region="center"
or non region specified, which defaults to centerdo you have any non-layout elements in your markup as direct child of BorderContainer? IE for once is more standard requiring and breaks on unclear markup in this cases