CODEWITHSUNDEEP
gwtstyling
Roddy of the Frozen Peas
Roddy of the Frozen Peas

Reputation: 15219

Removing inline style attributes from GWT elements

I've inherited a lot of legacy GWT code that can be succinctly described as "a web developer's worst nightmare." The developers have made use of a lot of elements that have inline styles -- for example, the GWT DeckPanel.

I want to remove these inline styles so I can apply an external stylesheet, but I can't seem to find any way of doing this. I know that an inline style can be set via this: DOM.setStyleAttribute(container1, "height", "100%"); or similar, but there doesn't seem to be any sort of corresponding removeStyleAttribute. There is a DOM.removeElementAttribute but this does not work for styles.

Is there a way to explicitly remove all inline styling from an attribute? I tried Googling but all I ended up finding were things related to UIBinder and lots of defensive posts from GWT devs a la "why would you want to do that?" And I can't do too much code modification since this app is massive and I'm on a deadline. We're not using UIBinder.

Upvotes: 3

Views: 7154

Answers (2)

ᴇʟᴇvᴀтᴇ
ᴇʟᴇvᴀтᴇ

Reputation: 12751

Set inline CSS styles like this:

Style style = widget.getElement().getStyle();
style.setPosition(Position.ABSOLUTE);
style.setTop(50, Unit.PX);
style.setLeft(0, Unit.PX);
// etc.

To remove styles:

style.clearPosition();
style.clearTop();
style.clearLeft();

Alternatively:

DOM.setStyleAttribute(element, "height", "");

To remove all inline styles for an element:

DOM.setElementProperty(element, "style", "");

You can also override inline styles with external styles by appending !important to the style definition. E.g.

.my-gwt-widget {
    height: 150px !important;
}

Upvotes: 9

Daniel Kurka
Daniel Kurka

Reputation: 7985

If you want to clear the style of an element you can use the following code:

DOM.setElementProperty(element, "style", "");

Upvotes: 2

Related Questions