Opened 12 years ago

Closed 12 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)

tab.html (2.6 KB) - added by guest 12 years ago.

Download all attachments as: .zip

Change History (9)

comment:1 Changed 12 years ago by bill

Milestone: 0.91.0
Owner: set to 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?

comment:2 Changed 12 years ago by 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.

Changed 12 years ago by guest

Attachment: tab.html added

comment:3 Changed 12 years ago by 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; }

comment:4 Changed 12 years ago by 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;	
}

comment:5 Changed 12 years ago by 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.

comment:6 Changed 12 years ago by guest

Ok, thanks.

comment:7 Changed 12 years ago by bill

Milestone: 1.01.1
Owner: changed from bill to Adam Peller

comment:8 Changed 12 years ago by bill

Resolution: fixed
Status: newclosed

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

Note: See TracTickets for help on using tickets.