Pergunta

Os seguintes funciona no Firefox:

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

mas isto é, não exibe. Quando eu tirar o css na div externa, ele funciona.

Eu também tentei apenas

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

e que funciona bem. Alguém sabe por que o css iria atrapalhar o processamento do TabContainer em ou seja? Ou há uma maneira melhor para garantir que o TabContainer só ocupa o espaço da janela (para evitar ter duas barras de rolagem - um para o recipiente e uma para o navegador)? Obrigado.

Foi útil?

Solução

Qual versão do IE?

Tente adicionar a seguinte regra CSS: html, corpo {altura: 100%; largura: 100%; margem de: 0; padding: 0; }

A outra coisa que você poderia fazer (embora isso possa parecer pesada) é ter um BorderContainer como seu elemento de nível superior e ter a TabContainer como a região = "center" parte.

<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>

Confesso que não pode tentar fazer isso no IE como am no Mac, mas têm vindo a fazer um monte de dijit disposição ultimamente e algo como isso deve funcionar.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top