Modifying CSS for GWT App

Question

Using a GWT web app, Firebug says that the following HTML

<table class="drop-zone drop-zone-column-66 multi-zone">
...
</table>

is using this CSS.

.maximized-gadget .drop-zone.multi-zone, .configure-tab a {
    display: block;
}

What CSS do I need to write so that this <table> will have style, display: none?

I made 2 attempts: [EDIT - updated .multi-zone and display:none]

.drop-zone .drop-zone-column-66 .multi-zone {
    display: none;
}

and

.maximized-gadget .drop-zone.multi-zone, .configure-tab a {
    display: none;
}

but Firebug still gives me the CSS shown at the top.

Please advise me.

ultranaut · Accepted Answer · 2012-12-01 02:39:51Z

1

Strictly speaking, all you should need is:

.maximized-gadget .drop-zone.multi-zone {
    display: none;
}

provided that that rule comes after the original rule you gave above:

.maximized-gadget .drop-zone.multi-zone, .configure-tab a {
    display: block;
}

Depending on what the structure of the rest of your document is and what you're trying to do, you may need to add some specificity to that rule.

The problem with your first attempt is that your rule would apply to an element with a class of multi-zone which is a descendant of an element of class drop-zone-column-66, which in turn is a descendant of an element of class drop-zone. What you want is to target an element that has all three of those classes set on it, which you can do by chaining those selectors:

.drop-zone.drop-zone-column-66.multi-zone {
    display: none;
}

which should set you right (though if I remember correctly this won't work in older versions of IE).

edited Dec 1, 2012 at 2:39

answered Dec 1, 2012 at 2:01

ultranaut

2,1281 gold badge17 silver badges22 bronze badges

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

6 Comments

ultranaut Over a year ago

Unless I'm misunderstanding the whole thing, you're trying to set display: none on your table, but in both of your attempts above you have it as display: block, which is how it's already set

Kevin Meredith Over a year ago

My fault - another typo. I mistakenly wrote 'display: block' rather than 'display: none' Also, I tried both of your recommendations, but neither worked for me. I'm thinking it's possible for a "!important" to be screwing me up. The team I'm on has used them before as workaround hacks.

ultranaut Over a year ago

yeah, !important can end up biting you in the ass, it should definitely be avoided.

Kevin Meredith Over a year ago

Well, I take back what I said about '!important.' I just checked my CSS, and I did not see any '!important' keywords in any of my affected classes' CSS.

ultranaut Over a year ago

And you're sure the new rule is after the original rule in the cascade?

|

Collectives™ on Stack Overflow

Modifying CSS for GWT App

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related