Opened 14 years ago
Closed 13 years ago
#4233 closed defect (fixed)
Pixel bug in dijit.layout.TabContainer css
Reported by: | guest | Owned by: | Adam Peller |
---|---|---|---|
Priority: | high | Milestone: | 1.1 |
Component: | Dijit | Version: | 0.9 |
Keywords: | Cc: | ||
Blocked By: | Blocking: |
Description
When using layoutAlign="top" on a layout widget inside a tabcontainer the widgets domNode gets a computed style of top=1.
This is caused by the tabcontainers css:
.dijitTabContainer .dijitAlignTop { /* position the tab labels row down by 1 px, and on top of the dijitTabPaneWrapper so the buttons can overlay the tab pane properly */ top:1px !important; z-index:10; }
See my test here: http://thomas.dev.webhuset.no/static/js/whm/tests/tab.html
In the test you can see a 1 px white line above the toolbar.
Attachments (1)
Change History (9)
comment:1 Changed 14 years ago by
Milestone: | 0.9 → 1.0 |
---|---|
Owner: | set to bill |
comment:2 Changed 14 years ago by
The css I mentioned above does not only affect the tab buttons, it affects all nodes with class 'dijitAlignTop' inside a tabcontainer. The 'dijitAlignTop' class is added to all domNodes where the widget has 'layoutAlign=top' by 'dijit.layout.layoutChildren'.
I have uploaded a new test where only the dijit and thundra css is loaded. Though the test contains similar html inside and outside the tabcontainer it renders different.
Changed 14 years ago by
comment:3 Changed 14 years ago by
Ah, I see your point. Right, so the TabController? (the container for the buttons) needs it's own class name and then have a rule like
.dijitTabController { top: 1px !important; }
comment:4 Changed 14 years ago by
Yes. The tab buttons can be positioned top, bottom, left and right so the css for top must be something like
.dijitTabController.dijitAlignTop { top:1px !important; z-index:10; }
comment:5 Changed 14 years ago by
Actually you can't specify a pattern that matches two CSS class names on the same node (at least not cross-browser). Need to generate a CSS class name like .dijitTabControllerTop.
comment:7 Changed 14 years ago by
Milestone: | 1.0 → 1.1 |
---|---|
Owner: | changed from bill to Adam Peller |
comment:8 Changed 13 years ago by
Resolution: | → fixed |
---|---|
Status: | new → closed |
Hmm, I don't think it's due to the top:1px you mentioned above, which affects the tab buttons not the content of the tabs. It seems that at the time of calculation the layout code thinks that either the LayoutContainer? has padding or the Toolbar has margin. Can you produce a testcase without the dynamic loading of the WH theme, and attach it to this bug using the "Attach File" button?