Using !important in jQuery's css() function

Question

I have a dialog with an overlay declared like so:

     .ui-widget-overlay  {
         position: absolute;
         left: 8px;
         top: 9px;
         height: 985px !important;
         width: 518px !important; 
      }

The page I have will have two different page heights. To account for this with the overlay I have done this in my JS file:

If small one visible:

$('.ui-widget-overlay').css("height", "985px !important");

else

$('.ui-widget-overlay').css("height", "1167px !important");

Apparently this does not work. Is there another way to over ride !important that would?

The page can switch back and forth so I need to always have one or the other. Also if I do not add !important to the css then the overlay will expand in height infinitely (its in facebook so i am assuming there is an issue there)

Any suggestions?

Solution 1

Dont apply styles to a class. Apply a class to your div as a style!

Let jQuery do all the work for you

You style sheet should have these classes in them

.ui-widget-overlay  {
         position: absolute;
         left: 8px;
         top: 9px;
         width: 518px !important; 
         }

.ui-widget-small { height: 985px;  }

.ui-widget-full { height: 1167px; }

Ok thats your CSS sorted

now your div

 <div id="myWidget" class="ui-widget-overlay ui-widget-small"> YOUR STUFF </div>

Now you can use jQuery to manipulate your divs either by attaching to a button/click/hover whatever it is you wanna use

$('#myWidget').removeClass('ui-widget-small').addClass('ui-widget-full')

And you dont need to use !important - that is really used when you start having issues with large CSS files or several loaded styles.

This is instant but you can also add an effect

$('#myWidget').hide('slow', function(){ $('#myWidget').removeClass('ui-widget-small').addClass('ui-widget-full').show('slow') }  )

You can add styles dynamically to your page like this- and to replace all existing classes with another class, we can use .attr('class', 'newClass') instead.

$('body').prepend('<style type="text/css"> .myDynamicWidget { height: 450px; } </style>')
$('#myWidget').attr('class', 'ui-widget-overlay')
$('#myWidget').addClass('myDynamicWidget')

But you do not want to be over writing your existing styles using this method. This should be used in a 'lost' case scenario. Just demonstrates the power of jQuery

Solution 2

There is a trick to do this.

$('.ui-widget-overlay').css('cssText', 'height:985px !important;');

$('.ui-widget-overlay').css('cssText', 'height:1167px !important;');

cssText is doing the trick here. It is appending css styles as string, not as variable.

Solution 3

You could try using $(this).attr('style', 'height:1167px !important'); I haven't tested it, but it should work.

Solution 4

You can create a dynamic stylesheet with rules that override the properties you want and apply it on the page.

var $stylesheet = $('<style type="text/css" media="screen" />');

$stylesheet.html('.tall{height:1167px !important;} .short{height:985px !important}');

$('body').append($stylesheet);

Now, when you add our newly created classes, they will take precedence since they are the last defined.

$('.ui-widget-overlay').addClass('tall');

demo at http://jsfiddle.net/gaby/qvRSs/

---

update

For pre-IE9 support use

var $stylesheet = $('<style type="text/css" media="screen">\
                    .tall{height:300px !important;}\
                    .short{height:100px !important}\
                    </style>');

$('body').append($stylesheet);

demo at http://jsfiddle.net/gaby/qvRSs/3/

Solution 5

Unless I've misread your question, what you're doing does work in jsfiddle.

EDIT: My fiddle only works in some browsers (so far, Chrome: pass, IE8: fail).

View more solutions

Comments

[Wesley Murch]

This is OK, but it will overwrite any existing inline styles.

[Dan Blows]

Yes, I was thinking that after I posted it... then saw @Frits' post and ran off to see whether I was going mad. You would have to do something annoying like getting $(this).attr('style') first, and checking whether it already has the attribute you're trying to set. There must be a better way.

[Wesley Murch]

$('a').attr('style', $(this).attr('style') + ';background:orange !important'); Would work fine.

[Dan Blows]

@Madmartigan True, I didn't think about the fact that it's CSS and it would be fine to have duplicate attributes. The only thing I would say is to make it as specific as possible - so ;background-color:orange !important would leave any other background attributes.

[Dan Blows]

Ha +20 for trying. I have tried to do this before and had exactly the same problem though. Maybe it's been fixed, or perhaps it only affects certain attributes or browsers.

[David Ruttka]

Maybe jQuery version? I used 1.4.4 in my Fiddle, and I'm using Chrome 10.0.648.205 if we want to try it in different browsers.

[David Ruttka]

Well, it fails in IE8. I should know by now to always test in IE first :)

[Dan Blows]

@SsRide360 Yes, all other things being equal, the last set item will take precedence over anything set before. So if you had two heights, both with !important, then the last one would be the winner. (PS make sure you separate the attributes with ; not , because it will write whatever is in the second variable to the style attribute without checking it first.)

[Dan Blows]

Which probably means it will be purple in IE7, with rainbows in IE6.

[Dan Blows]

Doesn't work on Firefox Mac either. Even weirder, Chrome Inspector says that the red is taking priority over the blue. I'm very confused.

[Dan Blows]

This is a good suggestion but it may not solve the issue. If for some reason the CSS is untouchable (perhaps it's on a CDN that can't be flushed for 48 hours, or CSS is done by a different team who refuse to make the change), you might need that !important declaration. So while I agree your solution gets to the root of the problem, it doesn't necessarily solve the issue at hand.

[Piotr Kula]

I am sorry - but you never mentioned that you cannot change the css. In that case you will have to use the last method- attach your own style sheet dynamically - use the attr('class...; to remove any attached classes; and reapply your own styles. and thats where you will have to use important- but important applies itself if its the last applied important of that class, switching wont work. You will have to remove the previous one.

[Josh M.]

This won't work for cases when you are trying to set a CSS property to a dynamically-calculated value. For instance, re-sizing some form element when its parent becomes smaller.

[J E Carter II]

This works well in situations where the target is generated at run time and many classes are inserted into its class attribute. Overriding all of those is only possible by adding a style attribute as well.

[candlejack]

Doesn't work if you need to set a calculate height via JS.