#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)
Change History (12)
comment:1 Changed 10 years ago by
Resolution: | → invalid |
---|---|
Status: | new → closed |
comment:2 Changed 10 years ago by
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 follow-up: 4 Changed 10 years ago by
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 Changed 10 years ago by
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:6 Changed 10 years ago by
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 10 years ago by
Attachment: | test-layout-tabcontainer.html added |
---|
Sizing the html element as well.
comment:7 Changed 10 years ago by
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 10 years ago by
Resolution: | invalid |
---|---|
Status: | closed → reopened |
comment:9 Changed 10 years ago by
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 10 years ago by
Attachment: | tabcontainer_noChildren_sizing_ie7.patch added |
---|
if we did want to patch dojo to workaround this bug, here's the patch file
Although this test case may be working on some browsers, it's not valid. You need to specify a size on the BorderContainer.