Search code examples
dojodijit.layout

Dojo/Dijit TitlePane


How do you make a titlePane's height dynamic so that if content is added to the pane after the page has loaded the TitlePane will expand?


Solution

  • It looks like the rich content editor being an iframe that is loaded asynchronously confuses the initial layout.

    As @missingno mentioned, the resize function is what you want to look at.

    If you execute the following function on your page, you can see that it does correctly resize everything:

    //iterate through all widgets
    dijit.registry.forEach(function(widget){
        //if widget has a resize function, call it
        if(widget.resize){
            widget.resize()
        }
    });
    

    The above function iterates through all widgets and resizes all of them. This is probably unneccessary. I think you would only need to call it on each of your layout-related widgets, after the dijit.Editor is initialized.

    The easiest way to do this on the actual page would probably to add it to your addOnLoad function. For exampe:

        dojo.addOnLoad(function() {
            dijit.byId("ContentLetterTemplate").set("href","index2.html");
            //perform resize on widgets after they are created and parsed.
            dijit.registry.forEach(function(widget){
                  //if widget has a resize function, call it
                  if(widget.resize){
                      widget.resize()
                  }
            });
        });
    

    EDIT: Another possible fix to the problem is setting the doLayout property on your Content Panes to false. By default all ContentPane's (including subclasses such as TitlePane and dojox.layout.ContentPane) have this property set to true. This means that the size of the ContentPane is predetermined and static. By setting the doLayout property to false, the size of the ContentPanes will grow organically as the content becomes larger or smaller.