AnsweredAssumed Answered

Border container not displaying content correctly

Question asked by alterwiel on Jul 1, 2015
Latest reply on Jul 2, 2015 by rscheitlin

I have a border container that is not displaying its content panes correctly until I open the Developer Tools console. Can anyone see why that might be happening? I've inserted two screenshots showing before and after display states of the container.

 

Markup:

 

<div>

    <div data-dojo-attach-point="infoContainerDiv" id="infoContainerDiv">

    </div>

</div>

 

Code in widget.js:

 

this.infoContainer = new BorderContainer({

                style: "height: 100%; width: 100%;"

            });

 

            this.topContent = new ContentPane({

                region: 'top',

                title: 'the title',

                content: 'I be on the top',

                style: 'height: 100px; border: 1px solid black;'

            });

 

            this.bottomContent = new ContentPane({

                region: 'bottom',

                title: 'the title',

                content: 'I be on the bottom',

                style: 'height: 100px; border: 1px solid black;'

            });

 

            this.accordionContainer = new AccordionContainer({

                region: 'center',

                style: 'border: 1px solid black;'

 

            });

 

            this.accordionContainer.addChild(

                new ContentPane({

                    title: "This is a content pane",

                    content: "Hi!"

                })

            );

 

            this.accordionContainer.addChild(

                new ContentPane({

                    title: "More content",

                    content: "Hello"

                })

            );

 

 

            this.infoContainer.addChild(this.topContent);

            this.infoContainer.addChild(this.bottomContent);

            this.infoContainer.addChild(this.accordionContainer);

            this.infoContainer.placeAt(this.infoContainerDiv);

            this.infoContainer.startup();

 

Before:

before.JPG

 

After:

 

After.JPG

Outcomes