Dojo's nested BorderContainer disappear in IE

Posted by h4b0 on Stack Overflow See other posts from Stack Overflow or by h4b0
Published on 2012-10-09T10:36:24Z Indexed on 2012/10/11 9:37 UTC
Read the original article Hit count: 151

Filed under:
|

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: good way

But in IE it is shown like that: bad way

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.

© Stack Overflow or respective owner

Related posts about cross-browser

Related posts about dijit.layout