38

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?

2

7 Answers 7

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.

1
  • 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. Sep 14, 2017 at 20:04
18

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

4
  • 2
    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, 2011 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, 2011 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 4, 2012 at 20:37
  • Doesn't work if you need to set a calculate height via JS.
    – candlejack
    Jan 27, 2018 at 6:16
12

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

5
  • 1
    This is OK, but it will overwrite any existing inline styles. Apr 28, 2011 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, 2011 at 19:54
  • 3
    $('a').attr('style', $(this).attr('style') + ';background:orange !important'); Would work fine. Apr 28, 2011 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, 2011 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, 2011 at 20:06
3

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/

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

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

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.