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"); |
Hi there. I found this by googling for “gwt add css property” and it was just what I needed. Thanks!
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
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
Awesome, thanks!
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;
I found this post by googling “styling programmatically in GWT” and it was just what I needed too. Thanks
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.
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?
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”);
Thanks! It was helpful a lot.
Thanks , I struggled to set border without using css . Its really working . Keep it up
does it support background-size or backgroundSize cause I tried
Container.getElement().getStyle().setProperty(“backgroundSize”, backgroundPxSize+”px ” + backgroundPxSize+”px”);
and didnt work :(
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!:-(