Dojo StackContainer does not display widgets correctly

Question

I am using Dojo StackContainer to get it to display a couple of widgets correctly. Here is my HTML (as described by the Dojo documentation)

<div id="scontainer-prog"></div>

In my JS file, I have the following code:

require([
    "dijit/layout/StackContainer",
    "dijit/layout/ContentPane",        
    "dojo/domReady!"
], function(StackContainer, ContentPane){
    var sc = new StackContainer({
        style: "height: 300px; width: 400px;",
        id: "myProgStackContainer"
    }, "scontainer-prog");

    var cp1 = new ContentPane({
        title: "page 1",
        content: "page 1 content"
    });
    sc.addChild(cp1);

    var cp2 = new ContentPane({
        title: "page 2",
        content: "page 2 content"
    });
    sc.addChild(cp2);

    sc.startup();
});

However, the page looks like the following:

Any idea on what I am doing wrong? This example is similar to what is provided on the Dojo StackContainer documentation page.

Answer 1

You missed to add dijit/layout/StackController, that generates the buttons which switches between content panes :

What you have to do is :

1. import dijit/layout/StackController

2. Create a div for the StackController: <div id="stackContolerDiv" ></div>

3. Instantiate your controller

You can see live example as bellow Snippet :

require([
    "dijit/layout/StackContainer",
    "dijit/layout/ContentPane",
    "dijit/layout/StackController",
    "dojo/domReady!"
], function(StackContainer, ContentPane, StackController){
    var sc = new StackContainer({
        style: "height: 150px; width: 400px;",
        id: "myProgStackContainer"
    }, "scontainer-prog");

    var cp1 = new ContentPane({
        title: "p1",
        content: "page 1 content"
    });
    sc.addChild(cp1);

    var cp2 = new ContentPane({
        title: "p2",
        content: "page 2 content 2 content"
    });
    sc.addChild(cp2);

    var cp3 = new ContentPane({
        title: "p3",
        content: "page 3 content 3 content content 3"
    });
    sc.addChild(cp3);
    
    var controller = new StackController({containerId: "myProgStackContainer"}, "stackControllerDiv");

    sc.startup();
    controller.startup();
});

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>

<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/>

<div class="claro">
  <div id="scontainer-prog"></div>
  <div id="stackControllerDiv"></div>
</div>