How to change CSS values ​​of a GWT widget?

Question

Basically, I like the default theme widgets. However, I need to change the font size on the DecoratedStackPanel widget.

I think this should be possible with something like this:

decoratedStackPanel.getElement().getStyle().setProperty("fontSize", "12pt"); 

However, "fontSize" is not a valid name for the property, and I have not found a way to get all the properties of the element. Therefore, I do not know the correct property name.

Any ideas?

Please do not post about widget inheritance or writing custom CSS. I like the default, but the font size. It should be possible afaik.

Answer 1

fontSize is true, the best way to use this is:

 decoratedStackPanel.getElement().getStyle().setFontSize(12, Unit.PT); 

But I'm not sure if this will lead to what you want. it sets the font size on the entire panel, and if the font element is set to a different font size, which will be used in this element. In this case, the css entry for a particular element would be better. For instance:

 .gwt-DecoratedStackPanel .gwt-StackPanelItem { font-size:12pt !important; } 

(! important will force you to use this particular font size setting, and it should be used only if you want to make sure that this font size is used. The first test is not).

Answer 2

You can use the DOM class to set style attributes.

 DOM.setStyleAttribute(decoratedStackPanel.getElement(), "fontSize", "12pt"); 

Answer 3

fontSize will be converted to font size

Answer 4

You might want to check this and this for gwt widget styles