dojo widget doesn't render unless browser window is resized

Question

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

I'm not seeing the same thing in the code snippet you pasted, in fact I'm not seeing a tabcontainer at all. — g00glen00b, Dec 19 '14 at 12:09

score 2 · Accepted Answer · edited Sep 27 '16 at 13:05

2

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! :)

edited Sep 27 '16 at 13:05

Christopher Powell

714
4
13

answered Jan 22 '15 at 10:08

Tejaswini

56
7

dojo widget doesn't render unless browser window is resized

1 Answers1

Linked