Pixel bug in dijit.layout.TabContainer css

[guest]

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.

[bill]

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?

[guest]

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.

[bill]

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; }

[guest]

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;	
}

[bill]

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.

[guest]

Ok, thanks.

[bill]

(In [11726]) Bug where CSS intended for tab labels was also affecting layout containers inside of the tab panes. Fixes #4233.