Opened 8 years ago

Closed 7 years ago

Last modified 7 years ago

#15475 closed defect (wontfix)

TabContainer: tab labels 20px tall even when no children (IE7)

Reported by: sujianlei Owned by:
Priority: undecided Milestone: tbd
Component: Dijit Version: 1.7.2
Keywords: Cc:
Blocked By: Blocking:

Description

To see it, just load the attached file in IE7. Note that other browsers (including IE8 & IE9) render the empty tabContainer the same height as the contentPane to the left.

Attachments (2)

test-layout-tabcontainer.html​ (1.5 KB) - added by sujianlei 8 years ago.
Sizing the html element as well.
tabcontainer_noChildren_sizing_ie7.patch​ (771 bytes) - added by bill 7 years ago.
if we did want to patch dojo to workaround this bug, here's the patch file

Download all attachments as: .zip

Change History (12)

comment:1 Changed 8 years ago by bill

Resolution: → invalid
Status: new → closed

Although this test case may be working on some browsers, it's not valid. You need to specify a size on the BorderContainer.

comment:2 Changed 8 years ago by sujianlei

It still happens after specifying a size -- I just added "width: 100%; height: 100%;" to both the body and the BorderContainer?. The problem is caused by the height of the TabListContainerTop?, which has a height of 20px in IE7 but 1px in other browsers.

comment:3 Changed 8 years ago by bill

Thanks for the test cases.

It's still invalid though, because you didn't size <html> itself. See http://dojotoolkit.org/reference-guide/1.7/dijit/layout/#sizing-to-viewport. When you add that it works.

comment:4 in reply to:  3 Changed 8 years ago by sujianlei

Replying to bill:

Thanks for the test cases.

It's still invalid though, because you didn't size <html> itself. See http://dojotoolkit.org/reference-guide/1.7/dijit/layout/#sizing-to-viewport. When you add that it works.

Thanks for the pointer Bill. However, I added sizing to <html> and it still does not work. I'm updating the test case with the sizing of <html> too. Could you please take another look and let me know what did I do wrong? Or, do you have a working sample that I can use? Thanks.

comment:5 Changed 8 years ago by bill

You simply misspelled "height" as "hight".

comment:6 in reply to:  5 Changed 8 years ago by sujianlei

Replying to bill:

You simply misspelled "height" as "hight".

Sorry for the late reply. I made the change but still got the same effect. As I mentioned before, the problem is caused by the height of the TabListContainerTop?, which has a height of 20px in IE7 but 1px in other browsers.

Changed 8 years ago by sujianlei

Attachment: test-layout-tabcontainer.html​ added

Sizing the html element as well.

comment:7 Changed 7 years ago by bill

Summary: The height of an empty tabContainer in a borderContainer is not 100% as the adjacent contentPane in IE7. → TabContainer: tab labels 20px tall even when no children (IE7)

It sounds like you are saying that on IE7 there's 20px space allocated for the tab labels, even though there are no tab labels. I see that on IE8 in IE7 compat mode, plus on the real IE7.

There's something about the nowrapTabStrip class that causes the height to be 19px even though the div is empty: 

>>this.scrollNode.offsetHeight
20
>>this.scrollNode.outerHTML
"
<DIV style="HEIGHT: auto" class="dijitTabListWrapper dijitTabContainerTopNone" 
              data-dojo-attach-point="tablistWrapper">
     <DIV class="nowrapTabStrip dijitTabContainerTop-tabs" role=tablist
          data-dojo-attach-point="containerNode"
          data-dojo-attach-event="onkeypress:onkeypress"></DIV>
</DIV>"
>>this.scrollNode.firstChild.offsetHeight
20
>>this.scrollNode.firstChild.className
"nowrapTabStrip dijitTabContainerTop-tabs"
>>this.scrollNode.firstChild.className = "";
""
>>this.scrollNode.firstChild.offsetHeight
0
>>this.scrollNode.firstChild.className = "nowrapTabStrip"
"nowrapTabStrip"
>>this.scrollNode.firstChild.offsetHeight
19

comment:8 Changed 7 years ago by bill

Resolution: invalid
Status: closed → reopened

comment:9 Changed 7 years ago by bill

Resolution: → wontfix
Status: reopened → closed

OK, something about the width: 50000 (which is one of the rules for nowrapTabStrip) causes the height to go to 20px even though there are no contents: 

>>this.scrollNode.firstChild.style.cssText="width: 50000px; display: block; ";
"width: 50000px; display: block; "
>>this.scrollNode.firstChild.offsetHeight
20
>>this.scrollNode.firstChild.style.cssText="display: block; ";
"display: block; "
>>this.scrollNode.firstChild.offsetHeight
1

I could add special code to work around this, explicitly setting the height to 0px in _ScrollingTabController::resize(), but this is such an obscure case (IE7 only, and only when there are no tabs) that it doesn't seem worth it. Here's how you can monkey-patch it: 

require(["dojo/aspect", "dojo/parser",
        "dijit/layout/ScrollingTabController", "dijit/layout/BorderContainer", "dijit/layout/TabContainer", "dijit/layout/ContentPane"],
function(aspect, parser, ScrollingTabController ){
        aspect.before(ScrollingTabController.prototype, "resize", function(){
                this.containerNode.style.height = this.getChildren().length ? "auto" : "0px";
        });
        parser.parse();
});

Changed 7 years ago by bill

Attachment: tabcontainer_noChildren_sizing_ie7.patch​ added

if we did want to patch dojo to workaround this bug, here's the patch file

comment:10 Changed 7 years ago by sujianlei

Thank much for the workaround Bill!

Note: See TracTickets for help on using tickets.