Setting display: block !Important

Question

There is a problem with a rollover doesn't want to show its content and if I do

#callCenter {
    position: fixed;
    z-index: 2411 !important;
    display: block !important; /* please note here !important */
    right: 110px;
}

It's shown, but if I do: (so the div is hidden until another element is clicked)

#callCenter {
    position: fixed;
    z-index: 2411 !important;
    right: 110px;
}

And

$('#telefonosCabecera').click(function(){
    $("#callCenter").css('display','block!important'); // or 'block !important'
    alert('done')
});

I don't see #callCenter but I do see the alert.

What could be the reason for this?

possible duplicate of [Jquery css: applying !important styles](http://stackoverflow.com/questions/2655925/jquery-css-applying-important-styles) — Jamie Dixon, Sep 12 '11 at 14:25

score 34 · Accepted Answer · edited Dec 02 '15 at 04:57

34

You need to do one of the following:

Add a class with the !important rule (i.e.: .myClass{display:block !important;} ) and then add the class to the element
Add the css attribute via $('#myElement').attr('style','display: block !important');

edited Dec 02 '15 at 04:57

Undo

answered Sep 12 '11 at 14:28

Phoenix

tried that but i end up with:
and the style attribute overrides the clasname i think :(
– Toni Michel Caubet Sep 12 '11 at 14:37
1

The inline style ALWAYS overrides the classes. You need to pick only one of the methods. try $('#callCenter').attr('style','display: block !important'); It should do the trick for you. – Phoenix Sep 12 '11 at 15:00
I've found another way: http://stackoverflow.com/questions/2655925/jquery-css-applying-important-styles/8894528#8894528 – Aram Kocharyan Jan 17 '12 at 12:34
2

@Phoenix That's not true. If the inline style is not "important", it can be overridden by a class with "important" properties. Example: http://jsfiddle.net/ZpKaA/ – Lionel Oct 08 '13 at 10:43

1 Answers1