Ways of setting a CSS property to an element in GWT [UPDATED]

12 thoughts on “Ways of setting a CSS property to an element in GWT [UPDATED]”

1. Marx October 1, 2009 at 21:39

   Hi there. I found this by googling for “gwt add css property” and it was just what I needed. Thanks!
2. Jesse December 22, 2009 at 17:16

   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
3. mailletf Post AuthorDecember 22, 2009 at 17:33

   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
4. Jesse December 22, 2009 at 17:42

   Awesome, thanks!
5. Thomas Käfer February 11, 2010 at 08:07

   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;
6. Todd Url April 4, 2011 at 00:13

   I found this post by googling “styling programmatically in GWT” and it was just what I needed too. Thanks
7. Mauricio Ubilla October 26, 2011 at 18:38

   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.
8. Petar ducic February 8, 2012 at 10:26

   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?
9. Giovanni Zotti September 10, 2014 at 10:58

   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”);
10. Mike March 18, 2015 at 08:37

    Thanks! It was helpful a lot.
11. Tam April 17, 2015 at 01:06

    Thanks , I struggled to set border without using css . Its really working . Keep it up
12. Mohammad Amin May 14, 2015 at 10:14

    does it support background-size or backgroundSize cause I tried
    Container.getElement().getStyle().setProperty(“backgroundSize”, backgroundPxSize+”px ” + backgroundPxSize+”px”);
    and didnt work :(