Change property of CSS class in GWT at runtime

Question

I'm familiar with assigning CSS classes to GWT elements to control their formatting, but what if I want to change an attribute in one of those CSS classes?

I've got a styled list of data. CSS classes are used to indicate the various data types (important, routine, trivial). I wish to allow the user to hide trivial entries. I'd like to modify the span.trivial CSS class to set display:none

I'm aware I could loop through the entries, see if an entry is trivial and add a noShow class (which itself has display:none) - but then I'm doing the looping, I'd rather let the browser do the work.

Is this possible in GWT?

Ian

Chris Lercher · Accepted Answer · 2011-05-25 06:27:28Z

2

I assume we have a structure similar to the following one

<div>
    <span class="routine">A</span>
    <span class="trivial">B</span>
    <span class="trivial">C</span>
<div>

This is how I would solve the problem:

.hideTrivial span.trivial {
    display: none;
}

<div class="hideTrivial">
    <span class="routine">A</span>
    <span class="trivial">B</span>
    <span class="trivial">C</span>
<div>

The ".hideTrivial span.trivial" selector applies only to "trivial" spans, if they occur within another element that has the class "hideTrivial". (Note: The span doesn't have to be a direct child of the "hideTrivial" div - it's ok, if you have a deeper element hierarchy.)

So to turn on/off hiding, you simply add/remove the "hideTrivial" class from the outer div.

(This technique can be used with and without GWT.)

answered May 25, 2011 at 6:27

Chris Lercher

37.9k20 gold badges103 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ianmayo Over a year ago

cha-ching! perfect answer. I Was focussing on GWT here in 2011, and forgetting html in 1995! Great solution. Thanks.

Peter Knego · Accepted Answer · 2011-05-25 07:24:51Z

1

AFAIK, javascript can not change the CSS file and have it reapplied. The same goes for GWT (since it compiles down to JS). So, you can not change a CSS rule and have all elements in your DOM reflect the change.

However, you can get a style of a DOM element and change that style. But that is for a particular element. In your case you'd still need to write code to traverses a set of element and make the change.

My suggestion would be to look at gwtQuery (a port, not a wrapper, of jQuery to GWT). It's super-efficient and super-compact. Here is a one-liner to do what you need:

$("span.trivial").hide()

edited May 25, 2011 at 7:24

answered May 25, 2011 at 7:12

Peter Knego

80.4k11 gold badges128 silver badges155 bronze badges

Comments

Ivan Frolov · Accepted Answer · 2013-06-04 04:29:18Z

1

Fot those who need to modify global CSS property values: you can choose StyleInjector for that purpose. http://google-web-toolkit.googlecode.com/svn/javadoc/2.0/com/google/gwt/dom/client/StyleInjector.html

answered Jun 4, 2013 at 4:29

Ivan Frolov

1,0688 silver badges6 bronze badges

Collectives™ on Stack Overflow

Change property of CSS class in GWT at runtime

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related