One of the most common questions we get asked is why a BorderContainer may not be displaying. There are two very common gotchas that we typically see when using Dijit Layout widgets, including BorderContainer.

Width/height issues

The most common culprit when your dijit/layout/BorderContainer doesn’t display at all is forgetting to set the width and height of the html and body elements. Somewhat counter-intuitively, these elements default to a width and height of 0, only expanding to fill content.

A BorderContainer is often configured to expand to fill its container node like so:

#borderContainer {
    width: 100%;
    height: 100%;
}

In a typical scenario, if all you have on a page is a BorderContainer directly under the body element, the body will have height and width of 0, so the BorderContainer will calculate the space it has to work in and will fill 100% of… no space! That is, unless you set width and height explicitly, like so:

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

With the html and body elements configured to use the full viewport, your BorderContainer will be able to expand as you would expect.

Did your widget start?

As with all Dijit widgets, if you are using BorderContainer programmatically, you need to ensure that you explicitly call startup after creating it and putting it into the document:

require([
    'dijit/layout/BorderContainer'
], function(BorderContainer){
    var mainContainer = new BorderContainer({
        id: 'mainContainer',
        design: 'headline'
    });
    mainContainer.placeAt(document.body);
    mainContainer.startup();
});

In Closing

If your BorderContainer or other Dijit Layout widget fails to display, check two things:

  • The size of the BorderContainer's containing element – if it’s the body element, make sure both the html and body elements are sized appropriately.
  • If using BorderContainer programmatically, ensure that you have called its startup method after creating and placing it.

If it still isn’t showing up, check your console and make sure there are no errors — a parsing error will often cause subsequent content to not display correctly.