Opened 8 years ago

Closed 8 years ago

#17174 closed defect (invalid)

TabContainer only renders first ContentPane if ContentPanes empty

Reported by: Bob Tarling Owned by: Bob Tarling
Priority: undecided Milestone: tbd
Component: Dijit Version: 1.8.3
Keywords: Cc:
Blocked By: Blocking:

Description (last modified by bill)

This works fine 

<div style="width: 600px; height: 400px">
  <div data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%;">    
    <div data-dojo-type="dijit/layout/ContentPane" title="My first tab" data-dojo-props="selected:true">
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" title="My second tab">
    </div>
  </div>
</div>

This fails to draw 2nd tab 

<div style="width: 600px; height: 400px">
  <div data-dojo-type="dijit/layout/TabContainer" style="width: 100%; height: 100%;">    
    <div data-dojo-type="dijit/layout/ContentPane" title="My first tab" data-dojo-props="selected:true" />
    <div data-dojo-type="dijit/layout/ContentPane" title="My second tab" />
  </div>
</div>

Both would appear legal with the tags of the 2nd example being self closing.

Not a major defect (feature) if it is documented and its unlikely for someone to hit this in the situation described above (empty tabs would not be normal). However I hit this problem where my tab pages were my own self contained custom widgets rather than just a ContentPane?. The markup for the tabpages in the TabContainer? were then empty and I suffered this defect till I realised the work-around.

I see the same no matter which browser I try.

Change History (4)

comment:1 Changed 8 years ago by bill

Description: modified (diff)
Owner: set to Bob Tarling
Status: new → pending

I'm pretty sure it's a problem with your code. Instead of specifying the size of the TabContainer directly, you say style="width: 100%; height: 100%;". That's not an error per-se, but in that case you need a height/width on an ancestor node with position=relative or absolute.

In other words, if you insist on specifying the size on the parent DOMNode rather than the TabContainer itself, your surrounding <div> should be like: 

<div style="width: 600px; height: 400px; position: relative;">

Does that fix it?

comment:2 Changed 8 years ago by bill

Component: General → Dijit

comment:3 Changed 8 years ago by Bob Tarling

Status: pending → new

Still fails for me.

I am still rounding out my Dojo skills so you may find that my structure is not exactly as someone more practised might expect. I've taken out the extra div level and I still get the same problem.

My report is more regarding the fact that 2 logically equivalent html fragments give different results as opposed to whether the structure of my example is entirely correct. It may be enough just to have some warning in the API documentation for TabContainer?.

This works fine for me 

<body class="soria">
	<div data-dojo-type="dijit/layout/TabContainer" style="width: 600px; height: 400px; position: relative;">
		<div data-dojo-type="dijit/layout/ContentPane" title="My first tab" data-dojo-props="selected:true">
		</div>
		<div data-dojo-type="dijit/layout/ContentPane" title="My second tab">
		</div>
	</div>
</body>

This fails to draw the 2nd tab 

<body class="soria">
	<div data-dojo-type="dijit/layout/TabContainer" style="width: 600px; height: 400px; position: relative;">
		<div data-dojo-type="dijit/layout/ContentPane" title="My first tab" data-dojo-props="selected:true" />
		<div data-dojo-type="dijit/layout/ContentPane" title="My second tab" />
	</div>
</body>

The only difference is whether the ContentPane? tags are self closing or explicitly closed by a separate end tag.

The same occurs if I replace ContentPane? with some custom widget of my own that has its own content.

comment:4 Changed 8 years ago by bill

Resolution: → invalid
Status: new → closed

Ah I see. OK, ignore my first comment. It's just that in HTML <div/> is interpreted the same as <div>. So your second ContentPane is actually inside the first one. <div/> would do what you expected if your document were labeled and served as XHTML, but it seems nobody really tries to do that nowadays. So you just need to do <div></div>.

Note: See TracTickets for help on using tickets.