Border container not displaying content correctly

3442
5
Jump to solution
07-01-2015 03:48 PM
AndrewTerwiel
Occasional Contributor II

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

0 Kudos
1 Solution

Accepted Solutions
AndrewTerwiel
Occasional Contributor II

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.

View solution in original post

5 Replies
RobertScheitlin__GISP
MVP Emeritus

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?

AndrewTerwiel
Occasional Contributor II

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Andrew,

   Please share your whole code for review.

0 Kudos
AndrewTerwiel
Occasional Contributor II

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.

RobertScheitlin__GISP
MVP Emeritus

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

esri/domUtils | API Reference | ArcGIS API for JavaScript