Ways of setting a CSS property to an element in GWT [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");

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

  1. Marx

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

  2. Jesse

    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 author

    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. Thomas Käfer

    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;

  5. Mauricio Ubilla

    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.

  6. Petar ducic

    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?

  7. Giovanni Zotti

    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”);

  8. Tam

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

  9. Mohammad Amin

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

  10. Proffina

    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!:-(

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.