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?

Duplicate of http://stackoverflow.com/questions/2655925/jquery-css-applying-important-styles — Dan Blows, Apr 28 '11 at 19:56
See my solution: http://stackoverflow.com/questions/2655925/jquery-css-applying-important-styles/8894528#8894528 — Aram Kocharyan, Jan 17 '12 at 12:34

score 28 · Answer 1 · answered Feb 05 '14 at 10:31

28

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.

answered Feb 05 '14 at 10:31

ghosh'.

1,567
1
14
19

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. – J E Carter II Sep 14 '17 at 20:04

Piotr Kula · Accepted Answer · 2011-04-28T20:46:45.687

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

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. — Dan Blows, Apr 28 '11 at 20:55
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. — Piotr Kula, Apr 28 '11 at 21:01
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. — Josh M., Dec 04 '12 at 20:37

score 12 · Answer 3 · answered Apr 28 '11 at 19:48

12

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

answered Apr 28 '11 at 19:48

Dan Blows

20,846
10
65
96

1

This is OK, but it [will overwrite any existing inline styles](http://jsfiddle.net/Madmartigan/sZEte/1/). – Wesley Murch Apr 28 '11 at 19:50
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. – Dan Blows Apr 28 '11 at 19:54
3

`$('a').attr('style', $(this).attr('style') + ';background:orange !important');` Would work fine. – Wesley Murch Apr 28 '11 at 19:57
@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 Apr 28 '11 at 20:00
@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 Apr 28 '11 at 20:06

Gabriele Petrioli · Answer 4 · 2011-04-28T21:09:29.887

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/

David Ruttka · Answer 5 · 2011-04-28T20:06:45.490

2

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).

edited Apr 28 '11 at 20:06

answered Apr 28 '11 at 19:59

David Ruttka

14,269
2
44
39

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. – Dan Blows Apr 28 '11 at 20:01
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 Apr 28 '11 at 20:04
Well, it fails in IE8. I should know by now to always test in IE first :) – David Ruttka Apr 28 '11 at 20:06
Which probably means it will be purple in IE7, with rainbows in IE6. – Dan Blows Apr 28 '11 at 20:08
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 Apr 28 '11 at 20:13

score 1 · Answer 6 · answered May 05 '14 at 12:22

1

I solved this problem like this:

inputObj.css('cssText', inputObj.attr('style')+'padding-left: ' + (width + 5) + 'px !IMPORTANT;');

So no inline-Style is lost, an the last overrides the first

answered May 05 '14 at 12:22

Burner

981
19
41

score 0 · Answer 7 · edited Dec 17 '12 at 10:29

0

Please remove height attribute from class and then try to implement your if and else condition.

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

if
     $('.ui-widget-overlay').attr("height", "985px");
else
     $('.ui-widget-overlay').attr("height", "1167px");

Enjoy code....keep smiling...

edited Dec 17 '12 at 10:29

Usman

3,200
3
28
47

answered Apr 29 '11 at 06:37

Nirav Jain

5,088
5
40
61

Using !important in jQuery's css() function

7 Answers7

Linked