All Articles

Ways of setting a CSS property to an element in Google Web Toolkit [UPDATED]

When I needed to add or modify a CSS property of an element in Google Web Toolkit (GWT), I’d always do it like this :

widget.getElement().setAttribute("style", "align:right;");

However, if there was already any style information for defined for that element, it would be overwritten. You could get the current attributes first and then readd them along with your new info but there is a much cleaner way :

widget.getElement().getStyle().setProperty("align", "right");

Important! Note that when setting a style property, your need to use camel case for the property name.

//WRONG!
myWidget.getElement().getStyle().setProperty("background-color", "red");
// RIGHT
myWidget.getElement().getStyle().setProperty("backgroundColor", "red");

Published Oct 12, 2008

I am a computer scientist specializing in building machine learning powered products. I’m currently a machine learning developer at Local Logic.

13 thoughts on "Ways of setting a CSS property to an element in Google Web Toolkit [UPDATED]"

Marx

Commented 2009-10-01 21:39:41

Hi there. I found this by googling for "gwt add css property" and it was just what I needed. Thanks!

Jesse

Commented 2009-12-22 17:16:33

Howdy,

Thanks for your post, it was very helpful. Whenever i use the function setVisible(false), then call the setAttribute, the widget becomes visible again. What is it about setting a css attribute that causes the widget to be set to visible?

-Jesse

mailletf

Commented 2009-12-22 17:33:37

setAttribute resets all the css attributes that you don't explicitly set when calling it. the default is visible so it becomes visible again. If you want to keep you widget invisible, use getStyle().setProperty to modify only the specific element you want to edit.

hope this helps

Jesse

Commented 2009-12-22 17:42:52

Awesome, thanks!

Thomas Käfer

Commented 2010-02-11 08:07:56

I am trying to set a style property programatically, but when I call myWidget.getElement().getStyle() I get the Error

Method "getStyle" with signature "()Lcom/google/gwt/dom/client/Style;" is not applicable on this object

Definition of myWidget: protected @UiField HTML myWidget;

Todd Url

Commented 2011-04-04 00:13:44

I found this post by googling "styling programmatically in GWT" and it was just what I needed too. Thanks

Petar ducic

Commented 2012-02-08 10:26:55

Hi all.

I have just a same question as Mauricio.

Are there some possibilities for programatically grab an attribute from css visible in host?

Have you Mauricio maybe solved the problem?

Mauricio Ubilla

Commented 2011-10-26 18:38:13

Hi there. I have a kinda difficult question.

I need to clone the styles of an element, to another element.

lets say i have:

and in my css I defined:

.a .b {color: red;}

now, lets say I have the GWT Element of div "b" and I clone it. I want to place its clone, outside the div "a", and I want it to look exactly like the original.

The css wont affect the clone, cause the rule says it works for divs "b" inside "a".

So I need a way to programatically read the styles of the original div and set them "inline" to the clone.

to achieve something like:

//original

//clone

widget.getElement().getStyle().getProperty() seems to be only returning the inline styles, but not the ones inherited by css (cascade stylesheets)

Do you know anyway to achieve this?

please, I would greatly appreciate your help.

Giovanni Zotti

Commented 2014-09-10 10:58:01

trying to change style for an Element in a flexTable, remember:

1) clear previous style:

myFlexTable.getCellFormatter().removeStyleName(row, col, "StyleNameToDelete");

2) Set the style for the widget in the cell/column (this may be in a "for" loop):

myFlexTable.getWidget(row,col).setStyleName(rowStyle[column]); // array of styles, one style for one column

3) set the style for the row:

myFlexTable.getRowFormatter().setStylename(row, "newRowStyle");

Mike

Commented 2015-03-18 08:37:41

Thanks! It was helpful a lot.

Mohammad Amin

Commented 2015-05-14 10:14:31

does it support background-size or backgroundSize cause I tried

Container.getElement().getStyle().setProperty("backgroundSize", backgroundPxSize+"px " + backgroundPxSize+"px");

and didnt work :(

Tam

Commented 2015-04-17 01:06:51

Thanks , I struggled to set border without using css . Its really working . Keep it up

Proffina

Commented 2018-08-02 09:02:40

Hello!

I need to chance css (for example, the cell color) of a checkbox element created with GWT class "CheckBox".

Can someone help me?

With the class .gwt-checkbox it doesn't work!:-(