View Full Version : Dynamic css styling

23 Sep 2011, 2:22 AM
am using a TabPabel and i've register a selection listerner on the TabItems

what i want to do is to add a css style to the TabItem after it has been clicked but with using the addStyleName() oder setStyleName() method the underlying <div> of the TabItem, which is representing the content of the Tab, gets the new style name an not the <li>

can anybody help me about this?

Colin Alworth
27 Sep 2011, 1:18 PM
Assuming you are trying to style the active tab indicator (not the tab contents themselves), you could write css for `li.x-tab-strip-active`. This way you need not add an additional class when the active tab changes. Note, however, that there is no div in that setup.

If you want to style the contents of the now-active tab, you could just style all of the tab items, and only the visible one will be seen by the user (as the others are not visible).

10 Oct 2011, 3:38 AM
thanks for your answer this is what im using now but what i need is something like a "was visitied/clicked"-flag which idicates that the tab was clicked at least once depending on this it should get an other look and so an other css class

to make it more clear:
i want to have a kind of timeline (arrows) where each tab can be clicked when there was something done in the tab before , before this all tabs are disabled, but i can select the second tab again to change something there when i'm allready on the fifth tab and this is the part where it gets tricky because with just having a straight forward navigation i can use the classes for disabled and enabled but with the possibility to jump back to another allready visited tab it looks very bad like in the picture below


any idea about this?

Colin Alworth
10 Oct 2011, 8:47 AM
Couple of thoughts:

Tabs are meant to be non-linear, you can move from any tab to any other easily - it sounds more like you are describing a wizard, where moving from one step to another often has some rules associated with it. The TabPanel hides all but one item using a CardLayout - this could be used to build a wizard , with some other widget to go forward/back and to indicate the current, completed, and future steps.

That said, TabPanel fires a BeforeSelect event, allowing you to ask the TabPanel which TabItem is currently selected. One option (if you simply want to disable the tab) would be to call .setEnabled(false) on that soon-to-be blurred item, another would be to simply style the header (available via tabItem.getHeader()).

13 Oct 2011, 12:37 AM
Thank you for your reply. the tabItem.getHeader() - method does exactly what i needed