Trying a structure with BorderContainer (dojo)

Question

I want a BorderContainer like the picture, two ContentPane at the top, and one in the bottom, but I'm not able to do it with the regions, so I don't know if there isn't a way to do it with the regions.

enter image description here

Thank you

score 2 · Accepted Answer · answered Oct 17 '14 at 10:09

It depends a little bit on how you want the panes to scale when you resize the window. Do you want the bottom pane to take all extra height? Do you want the top two panes to stay 50/50 in width?

Assuming you want the division of space to stay 50/50 both in width and height, you could do it like this:

<div data-dojo-type="dijit/layout/BorderContainer">

    <div data-dojo-type="dijit/layout/ContentPane" 
         data-dojo-props="region: 'leading'" 
         style="width: 50%">leading</div>

    <div data-dojo-type="dijit/layout/ContentPane" 
         data-dojo-props="region: 'center'">center</div>

    <div data-dojo-type="dijit/layout/ContentPane" 
         data-dojo-props="region: 'bottom'" 
         style="height: 50%">bottom</div>
</div>

Normally, the center region will grab all extra space when you resize the window, but you can set a relative width/height on the leading/top/trailing/bottom regions so that they always use that share of the screen.

that is. I was confused about some concepts so I didn't get it correctly. Thanks — Juanjo, Oct 17 '14 at 10:53

score 2 · Answer 2 · edited Oct 17 '14 at 12:42

I think you want to have a nested border container. Basically, you want a top and center (or center and bottom) and in the top put a left and center (or center and right).

<div data-dojo-type="dijit/layout/BorderContainer">

    <div data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="region: 'top'" style="height: 50%">

        <div data-dojo-type="dijit/layout/ContentPane" style="width: 50%"
             data-dojo-props="region: 'left'">inner top left</div>

         <div data-dojo-type="dijit/layout/ContentPane" 
             data-dojo-props="region: 'center'">inner top center</div>
    </div>

    <div data-dojo-type="dijit/layout/ContentPane" 
         data-dojo-props="region: 'center'">outer center</div>
</div>

This is a good suggestion, nothing wrong with nested layouts. In this case, I think it handles the 50%+margins better as well (the upper and lower pane remain 50%, even when very small). I've taken the liberty of adding an example to your answer. — Frode, Oct 17 '14 at 12:50

Trying a structure with BorderContainer (dojo)

2 Answers2