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?

Labanna

Duplicate of #2656425 – Hanukkah

See my solution: #2656425 – Poul

Answer 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

Stegman

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. – Hanukkah

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. – Stegman

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. – Brundage

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

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

Nickname

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. – Since

Answer 3

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

Hanukkah

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

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. – Hanukkah

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

@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. – Hanukkah

@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.) – Hanukkah

Answer 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/

Injured

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

Triphylite

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. – Hanukkah

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. – Triphylite

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

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

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. – Hanukkah

Answer 6

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

Delmerdelmor

Answer 7

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

Gramercy