Set css from GWT (dynamically) to element with multiple styles associated

Question

I have an instance of TabLayoutPanel where number of tabs would be set dynamically. Therefore to align tabs to fill whole width of the screen I need to

1) Override gwt-TabTayoutPanel default value width 16384px with auto !important (done);

2) Set width of gwt-TabTayoutPanelTab to proper percentage value (e.g. 2 tabs = 50%. 3 tabs = 33%, 4 tabs = 25% and so on). I have a simple function for that which goes like this (simplified):

Double cssValue = 100.0/getWidgetCount();

(done)

3) Now here goes my question: how can i set the width of gwt-TabTayoutPanelTab from Java? I bolded Tabs because when i use this.getStyleName(); i got in return gwt-TabLayoutPanel not gwt-TabLayoutPanelTab .

In sum, I can divide my question in two:

-how to access TabLayoutPanelTab css class from GWT?;

-how to set said class width with my dynamically generated percentage number?;

EDIT: Proper edit of function to determine percentage value.

Answer 1

-how to access TabLayoutPanelTab css class from GWT?;

int widgetCount = panel.getWidgetCount();
for(int i = 0; i < widgetCount; i++)
    System.out.println(panel.getTabWidget(i).getParent().getStyleName());
}

As you can see there is no direct way to access the tabs. What you can do is access the widgets in the tabs, and get their parent, which is the tab in question.

-how to set said class width with my dynamically generated percentage number?;

• If you have a certain amount off possible percentages then you can declare those classes (e.g. custom-Width-25, custom-width-33 etc.) where you specify the width with the !important annotation in order to override everything else.
• If the previous solution is not acceptable then you can only use inline css. This means that the element must be already loaded in the DOM. Somewhere in your code where you know that the element is loaded you can call something like this :

int widgetCount = panel.getWidgetCount();
for(int i = 0; i < widgetCount; i++) {
  com.google.gwt.user.client.Element tabElement = panel.getTabWidget(i).getParent().getElement();
  tabElement.getStyle().setWidth(100/widgetCount, Unit.PCT);
}