CSS - adding !important with variable

Question

I want to be able to add an "!important" to the height of #content on line 7 of the code below. I need to be able to use the variable $newHeight because it needs to stay dynamic.

Does anyone know how I can append an !important to this css declaration? I tried using a plus (+) sign to concatenate, but was unsuccessful.

Here is the code:

$(window).resize(function() {

    var $windowHeight = $(window).height();
    var $newHeight = $(window).height()-$('#footer').height()-153;

    if ($windowHeight < 847){
        $('#content').css("height",$newHeight);         
}

});

On a side note - if you're doing this to make the footer always shown, consider using position: fixed; on it and not adjusting the content height. Just my two cents. — meiamsome
– meiamsome, Commented Jul 1, 2013 at 15:46
@meiamsome hey, thanks for the response. Actually the footer thing is a different issue I am having, as well. I set it to fixed, which works great, except for the fact that I have to have a min-width of 1300px on it and when the window is smaller the scroll bar shows up but does not scroll the fixed footer! how can I overcome that? — Moose
– Moose, Commented Jul 1, 2013 at 15:49
@Moose Why do you even need !important here for the inline style? Is this value set as !important in a stylesheet somewhere? — mclark1129
– mclark1129, Commented Jul 1, 2013 at 15:54
@Moose You could go the jquery way: $(window).scroll(function(){ $('#footer').css('left',-$(window).scrollLeft()); }); but I don't know if that's really better or not. (I'd say it is, as losing a footer if the JavaScript is disabled is less major than losing content.) — meiamsome
– meiamsome, Commented Jul 1, 2013 at 15:56
Using !important in website stylesheets is usually a bad practice - the attribute is meant to be used in places like user-specific stylesheets to override styling provided by the page. Instead you should figure out why the style isn't being applied without that attribute. (And if you're setting it on the element inline, it should have the highest specificity - it might be that something else is making it impossible for the element to have that height.) — millimoose
– millimoose, Commented Jul 1, 2013 at 16:13

Community · Accepted Answer · 2017-05-23 10:25:32Z

2

You can't set !important with jQuery, see here for a demo of it not working, and here for a long explanation and some alternative answers

You could have used a class that had the height and !important but this isn't viable as height is variable. I would look on the above thread for a proper, solid answer

Alternatively, have you tried just changing the height like:

$('#content').height($newHeight);

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Jul 1, 2013 at 15:45

Andy

14.6k3 gold badges55 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Moose Over a year ago

@Andy, I have tried changing the height the way you suggested, but the thing is that it needs to have an !important there because of other elements on the page :(

Andy Over a year ago

@Moose Did you look at the thread I linked for other fixes? I would recommend restructuring the other elements so !important is not needed

Moose Over a year ago

@andy, hmmmmmm darnit..... i didnt wanna do that!! lol okay ill see if that works.

Mohit Bhansali · Accepted Answer · 2013-07-01 15:52:02Z

1

You can add !important like this:

var element = document.getElementById("content");
element.setAttribute('style', 'height:'+$newHeight+'!important');

edited Jul 1, 2013 at 15:52

answered Jul 1, 2013 at 15:43

Mohit Bhansali

1,7854 gold badges20 silver badges43 bronze badges

Comments

Jonhatan Fajardo · Accepted Answer · 2018-08-09 21:14:23Z

0

This work for me

let style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.backgrounds { background: ' + color + '!important; }';
document.getElementsByTagName('head')[0].appendChild(style);

answered Aug 9, 2018 at 21:14

Jonhatan Fajardo

4088 silver badges11 bronze badges

Collectives™ on Stack Overflow

CSS - adding !important with variable

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related