Opened 9 years ago

Closed 9 years ago

Last modified 9 years ago

#12172 closed defect (fixed)

dijit.Dialog containing TabContainer renders incorrectly when Dialog is initialized programmatically

Reported by: talisto Owned by: bill
Priority: high Milestone: 1.6
Component: Dijit Version: 1.6.0b1
Keywords: Cc:
Blocked By: Blocking:

Description (last modified by bill)

I've attempted to track this issue down to the most simple test case. Other widgets may be affected as well, but the TabContainer widget is the only one I've experienced this issue with so far.

I'm loading a dijit.Dialog's content from an external file. The Dialog contains a TabContainer, like so (dialog.html):

<div dojoType="dijit.layout.ContentPane" style="width:500px;height:500px">
  <div dojoType="dijit.layout.TabContainer">
      <div dojoType="dijit.layout.ContentPane" title="Test Tab">
        Test Content
      </div>
    </div>
  </div>
</div>

Now, if I define the dialog via markup and show the dialog programmatically with a button, it works fine, like so:

  <div data-dojo-type="dijit.Dialog" data-dojo-id="dialog" data-dojo-props="href:'dialog.html'">
  </div>

  <button data-dojo-type="dijit.form.Button">
    Show Dialog
    
    <script type="dojo/method" data-dojo-event="onClick">
      dialog.show();
    </script>
  </button>

However if I create the dialog programmatically, the tabs do not render correctly:

  <button data-dojo-type="dijit.form.Button">
    Show Dialog
        
    <script type="dojo/method" data-dojo-event="onClick">
      var dialog = dijit.Dialog({
          href: "dialog.html"
      });
      
      dialog.show();
    </script>
  </button>

Both methods of initializing the dialog should be identical, but have different results.

NOTE: This test works fine in Dojo 1.5, the bug only occurs in Dojo 1.6 beta 1.

I've attached the test-case files and a screenshot.

Attachments (4)

dialog.html (245 bytes) - added by talisto 9 years ago.
Dialog 1 (correct).png (10.2 KB) - added by talisto 9 years ago.
Dialog 2 (incorrect).png (9.3 KB) - added by talisto 9 years ago.
dialogtest.html (1.2 KB) - added by talisto 9 years ago.

Download all attachments as: .zip

Change History (11)

Changed 9 years ago by talisto

Attachment: dialog.html added

Changed 9 years ago by talisto

Attachment: Dialog 1 (correct).png added

Changed 9 years ago by talisto

Attachment: Dialog 2 (incorrect).png added

Changed 9 years ago by talisto

Attachment: dialogtest.html added

comment:1 Changed 9 years ago by talisto

I just noticed that if I replace the 1.6b1 version of dijit/layout/ContentPane.js with the 1.5 version, the issue does not occur. So perhaps this is an issue with the ContentPane? rather than the TabContainer?, but I still don't see why declaring the Dialog via markup vs. programmatically would have any effect on the rendering..

comment:2 Changed 9 years ago by bill

Description: modified (diff)
Milestone: tbd1.6
Owner: set to bill
Status: newassigned

Thanks for attaching the test case, always appreciated. I'll take a look, not sure about the markup/programmatic difference but it seems likely to be a ContentPane issue, as you said (and the test will probably still fail if you replace the Dialog with a ContentPane).

comment:3 Changed 9 years ago by bill

Oh, it's just that you need to call

dialog2.startup();

Parser calls startup() on all widgets, but for programmatically created widgets you need to call startup() yourself.

I guess Dialog.show() could call startup() automatically if !this._started.

comment:4 Changed 9 years ago by bill

Resolution: fixed
Status: assignedclosed

(In [23571]) For back-compat with 1.5, make Dialog.show() call startup() if the Dialog wasn't already started. Fixes #12172 !strict.

comment:5 Changed 9 years ago by talisto

Fantastic! Thanks, bill!

comment:6 Changed 9 years ago by ebengtso

Hi, if I replace the ContentPane? with a simple div node, the TabContainer? does not get displayed.

Is the below an user bug or dojo bug?

<div dojoType="dijit.Dialog"
         style="display: none; width: 30em;" id="dialog">
	<div style="width:300px;height:200px">
	  <div dojoType="dijit.layout.TabContainer">
	      <div dojoType="dijit.layout.ContentPane" title="Test Tab">
	        Test Content
	      </div>
	    </div>
	  </div>
	</div>
</div>

comment:7 Changed 9 years ago by bill

No, that's not a bug, because the TabContainer needs to have a size specified unless it has a layout widget parent that sets the size for it.

Note: See TracTickets for help on using tickets.