2

The following works in firefox:

&lt div style="position:absolute;top:0px;margin-top:60px;bottom:0px;width:100%">
&lt div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width:100%;height:100%">
{% for row in tabContent %}
  &lt div id="{{row.0}}" dojoType="dijit.layout.ContentPane" title="{{row.1}}">
    {% include row.2 %}
    &lt /div>
{% endfor %}
&lt /div>
&lt /div>

but in i.e. it doesn't display. When I take out the css on the outer div, it works.

I also tried just

&lt div style="position:absolute;top:0px;margin-top:60px;bottom:0px;width:100%">
&lt div style="width:100%;height:100%">
asdf
&lt /div>
&lt /div>

and that works fine. Does anyone know why the css would mess up rendering of the TabContainer in i.e.? Or is there a better way to make sure the TabContainer only takes up the space of the window (to prevent having two scrollbars--one for the container and one for the browser)? Thanks.

humoeba
  • 145
  • 1
  • 5
  • 10

1 Answers1

1

What version of IE?

Try adding the following CSS rule: html, body { height: 100%; width: 100%; margin: 0; padding: 0; }

The other thing you could do (though it might seem heavy-handed) is have a BorderContainer as your top-level element and have the TabContainer as the region="center" part.

<div dojoType="dijit.layout.BorderContainer" style="width:100%;height:100%">
    <div dojoType="dijit.layout.ContentPane region="top" style="height:60px">
        ...
    </div>
    <div dojoType="dijit.layout.TabContainer region="center">
        ...
    </div>
</div>

I confess I can't try this in IE as am on Mac but have been doing loads of dijit layout lately and something like this should work.

Michael B
  • 106
  • 4
  • 1
    Thank you very much! I couldn't get the first way to work, but the BorderContainer did the job! oh, and IE version 6, if anyone still cares. – humoeba Aug 14 '09 at 16:46