Opened 9 years ago
Closed 9 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 )
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 9 years ago by
Description: | modified (diff) |
---|---|
Owner: | set to Bob Tarling |
Status: | new → pending |
comment:2 Changed 9 years ago by
Component: | General → Dijit |
---|
comment:3 Changed 9 years ago by
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 9 years ago by
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>.
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:
Does that fix it?