Search code examples
dojocontentpaneborder-container

Trying a structure with BorderContainer (dojo)

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

Solution

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