Dojo StackContainer children are not resizing on browser maximise/restore

Question

Hi. I have the following nested layout in a dojo 1.4 app:

BorderContainer 1

--> Stack Container 1

-->-->BorderContainer 2

-->-->BorderContainer 3

The StackContainer is sized with width and height 100%. When I resize the browser window using maximise/restore, the StackContainer correctly resizes to the center region of it's parent BorderContainer.

The problem I have is that the StackContainer children (BorderContainer 2 and 3) do not get resized to the StackContainer's contentBox.

Is there something special you have to do to force a resize of StackContainer children? I have tried calling StackContainer1.resize() but this makes no difference.

Thanks in advance.

Additional information:

Thanks for the reply peller. The widget hierachy that contains the StackContainer is actually a custom widget, so the StackContainer is not actually in a BorderContainer directly, but has its height and width explicitly set to 100%. This works and the StackContainer is resized correctly on browser maximise. The direct children of the stackcontainer are BorderContainers and it is these BorderContainers that do not get resized when the StackContainer is resized. The exact markup is:

<div dojoType="dijit.layout.StackContainer" style="height:100%;width:100%;">
    <div dojoType="dijit.layout.BorderContainer" gutters="false" style="height:100%;width:100%;padding:0;" id="bcWrongSize">
    </div>
</div>

It is the BorderContainer 'bcWrongSize' that does not get resized with the parent StackContainer. The inlined height and width specified on the BorderContainer are replaced with explicit pixel dimensions by the StackContainer. However, on browser resize, the StackContainer is resized to its parent widget correctly, but the explicit height and width on the BorderContainer are incorrect. Incedentally, the layout method on the StackContainer is called, and it resizes the BorderContainer (being the visible child). However, the _contentBox dimensions that it passes to the BorderContainer are the dimensions of the StackContainer BEFORE its resize. The width and height computed by dojo.marginBox are incorrect (the offsetWidth and offsetHeight are the dimensions from before the browser maximise). Maybe this issue is because the StackContainer is the subContainerWidget of a custom widget and so is sized with width and height 100%?

Answer 1

We had a similar problem on a project. Below is the snippet that worked for us. Note the use of region for the stackContainer (it's in a bordercontainer) and the lack of height/width on the inner border containers.

<div dojotype="dijit.layout.StackContainer" jsid="buttonStack" region="bottom" style="height: 180px">
      <div jsid="selectionButtons" dojotype="dijit.layout.BorderContainer" gutters="false">
           <div dojotype="dijit.layout.ContentPane" region="bottom">
                <button id="btnClearSelection" dojotype="dijit.form.Button" 
                     label="Clear Selection" disabled> </button>
                <button id="btnClearAll" dojotype="dijit.form.Button" 
                     label="Clear All" disabled> </button>
            </div>
      </div>
<div>