Anil Bhatiya Anil Bhatiya - 2 months ago 8
Javascript Question

dojo widget doesn't render unless browser window is resized

The widget does not get rendered in the TabContainer unless the browser(I'm using Chrome) window is resized or Developer tool is opened. I have tried the solutions provided on earlier threads like setting the height and width of the BorderContainer, TabContainer and ContentPanes but there is no difference. The following is my code snippet. To the attachpoint "steps" I'm attaching certain data. This tab "Steps" is the problem. Any solution? Below is my code...



<div>
<div data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline'"
style="width: 100%;height:100%;border:0">
<div class="shadow" data-dojo-type="dijit.layout.ContentPane" style="padding:0"
data-dojo-props="region:'top'">
<div data-dojo-type="dijit.layout.ContentPane" style="padding:0">
<span style="float:left;font-size:Medium">${tName}</span>
<div label="${saveLabel}" style="float:right"
data-dojo-type="dijit.form.Button"
data-dojo-props="iconClass:'dijitEditorIcon dijitEditorIconSave'"
data-dojo-attach-point="save"
></div>
<div label="Export" style="float:right"
data-dojo-attach-point="export"
></div>
<div label="Utilities" style="float:right"
data-dojo-type="dijit.form.ComboButton"
data-dojo-props="iconClass:'dijitIconFunction'"
data-dojo-attach-point="utilityWizard">
<div dojoType="dijit.Menu">
<div dojoType="dijit.MenuItem" label="Add Parameters for sub step data reference"
data-dojo-attach-point="paramWizard">
</div>
</div>
</div>
</div>
</div>
<div data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'center'" style="height:100%;width:100%;padding:0">
<div data-dojo-type="dijit.layout.TabContainer"
data-dojo-attach-point="actionContainer" style="height:100%;width:100%">

<div data-dojo-type="dijit.layout.ContentPane"
data-dojo-attach-point="widgetCont" style="height:100%;width:100%"
title="Main" selected=true>
Action Attributes</div>

<div data-dojo-type="dijit.layout.ContentPane"
data-dojo-attach-point="steps" style="height:100%;width:100%;padding:0"
title="Steps">
Action Substeps</div>

</div>
</div>
</div>
</div>





Before window resize
After window resize

Answer

I called the resize method of bordercontainer and now it's rendering! Provide an attachpoint name to the BorderContainer (bc), and in the corresponding JS file from where you are attaching the widget, use the resize method after startup:

    resize: function () {
        this.bc.resize(arguments);
        this.inherited(arguments);
    }

This worked for me! :)