[SOLVED] DOJO ContentPane inner DIV height changing on ContentPane resize

DOJO ContentPane inner DIV height changing on ContentPane resize

I'm using DOJO's ContentPane module. I have a div element in one of the panes and I need to give it a certain height - 100 pixels less than the height of the ContentPane so that the div changes its height dynamically when you change the ContentPane size by dragging the splitters. I'm new to Dojo and would be happy if somebody could help me with this.

Thanks.

Solution

I think the best solution is via nested BorderContainers with properly set splitters, because that way dijit/layout will take care of resizing and you won't need to write any JavaScript code and your layout will be based solely on CSS.

It's kinda cumbersome to explain, so I created a working example for you at jsFiddle: http://jsfiddle.net/phusick/Ayg8F/ + a diagram:

enter image description here

NB: Do not forget to set height: 100% for html, body and the top BorderContainer.

The drawback of this solution is you will have to replace plain divs with ContentPanes. If you do not want to or can't you can use dojo/aspect and connect to BorderContainer or ContentPane resize method and resize your divs manually whenever the size changes:

require([
    "dojo/ready",
    "dojo/aspect",
    "dijit/registry",
    "dijit/layout/ContentPane",
    "dijit/layout/BorderContainer"
], function(
    ready,
    aspect,
    registry
) {

    ready(function() {
        var bc = registry.byId("borderContainer1");
        aspect.after(bc, "resize", function() {
            // calculate and set <div> size here
            console.log("resize divs");
        });
    });  
});