topic Re: Border container not displaying content correctly in ArcGIS Web AppBuilder Questions

Border container not displaying content correctly

AndrewTerwiel — Wed, 01 Jul 2015 22:48:19 GMT

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>

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:

After:

Re: Border container not displaying content correctly

RobertScheitlin__GISP — Thu, 02 Jul 2015 01:48:43 GMT

Andrew,

Did you add "_WidgetsInTemplateMixin" in your widgets declare and require as instructed in the developer help guide?

Use dojo dijit—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

See this similar thread:

My custom widget doesn't turn a select into a dijit, what did I miss?

Re: Border container not displaying content correctly

AndrewTerwiel — Thu, 02 Jul 2015 20:54:34 GMT

Thanks for your suggestion, Robert. I tried that, but unfortunately it made no difference.

Re: Border container not displaying content correctly

RobertScheitlin__GISP — Thu, 02 Jul 2015 21:01:33 GMT

Andrew,

Please share your whole code for review.

Re: Border container not displaying content correctly

AndrewTerwiel — Fri, 03 Jul 2015 00:40:05 GMT

I've found the cause.

I need to hide the infoContainerDiv when the widget opens, so I have this line of code:

query(this.infoContainerDiv, self).style('display', 'none');

I then want to show the infoContainerDiv after a typeahead suggestion has been selected, so I have this line of code:

query(this.infoContainerDiv, this.domNode).style('display', '');

Removing both of these fixes the display problem.

Now I just need to find a better way of hiding and displaying the infoContainerDiv.

Re: Border container not displaying content correctly

RobertScheitlin__GISP — Fri, 03 Jul 2015 02:12:09 GMT

For easily hiding and showing dom nodes or dijits just use esri/domUtils

esri/domUtils | API Reference | ArcGIS API for JavaScript