Using !important in jQuery's css() function

javascript jquery css jquery-ui jquery-dialog
Stanley Cup Phil picture Stanley Cup Phil · Apr 28, 2011 · Viewed 54.1k times · Source

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?

Answer

ghosh'. picture ghosh'. · Feb 5, 2014

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.

Related questions

animating addClass/removeClass with jQuery

I am using jQuery and jQuery-ui and want to animate various attributes on various objects. For the sake of explaining the issue here I've simplified it to one div that changes from blue to red when the user mouses over …

Read More
Change CSS properties on click

I am trying to change the CSS of one element on click of another element. I've searched a lot but nothing works perfectly. Currently I am using the below code, but it doesn't work. Can anyone tell me what I …

Read More
Using jQuery how to get click coordinates on the target element

I have the following event handler for my html element jQuery("#seek-bar").click(function(e){ var x = e.pageX - e.target.offsetLeft; alert(x); }); I need to find the position of the mouse on the #seek-bar at the time …

Read More