Reputation: 6066

How to override css containing '!important' using jquery?

I want to apply height for specific div using jquery but not able to override the '!important' keyword using jquery.

Here is markup:

<div id="divL1" class="myclass">sometext here</div>
<div id="divL2" class="myclass">sometext here</div>
<div id="divL3" class="myclass">sometext here</div>
<div id="divL4" class="myclass">sometext here</div>

css:

.myclass{
 height:50px !important;
}

Here i want to find the class "myclass" where divid equals "divL3"

I have Tried with:

$('#divL3.myclass').css('height', '0px');

but wont work! so, how to override '!important' css using jquery.

Help appreciated!

Upvotes: 29

Answers (15)

Jeff Beagley

Reputation: 1025

I was running into a problem where we allow the users to define their own font size for Kendo Grids, however after setting the value, and then manipulating the grid in any way, it'd reset the font size. So we actually defined an ID for the style tag and changed the html with the proper CSS each time.

At the top of our main page, we set the font-size by what is saved in their PHP Session Variable, or from the database.

echo "<style id='grid-style'>table { font-size: $Grid_Font_Size !important; }</style>";

Then in order to change it, we do the following jquery where font_size is the new size

$( "#grid-style" ).html( "table { font-size: " + font_size + "px !important; }" );

Upvotes: 0

hatsrumandcode

Reputation: 1871

I prefer to create a class and add it to specific div, for example

This can be either inline or in an external CSS file:

<style>
.class-with-important { height: 0px !important; }
</style>

If this is something that is never going to change, you can manually add the class to that div:

<div id="divL3" class="myclass class-with-important">sometext here</div>

or you can use jQuery to add this script tag at the bottom of that page

<script>
 $(document).ready(function(){
   $('#divL3').addClass("class-with-important");
 });
</script>

You can use the 'style' option, but would recommend doing it this way:

 var currentStyle = $('#divL3').attr('style');
 $('#divL3').attr('style', currentStyle + ' width:500px !important;');

This way you do not override the existing style, in case a third party plugin adds any dynamic style to your page, which is not unusual if you are using a CMS like WordPress.

Upvotes: 1

Angel M.

Reputation: 2742

I had the same issue, so I set up max-height in css, and then overrided height by jQuery:

css

#elem{
  max-height:30px !important;
}

jQuery:

$('#elem').height('30px !important');

Upvotes: 0

F.O.O

Reputation: 4960

I dont understand why you have !important in your CSS if you hope to override it later. Remove the !important in your CSS height. CSS always prioritizes your HTML tag styles over CSS.

 .myclass{
   height:50px;
  }

  $('#divL3.myclass').css('height', '0px');

This is better for design.

Upvotes: 0

9ete

Reputation: 3762

You can do this:

$(".myclass").css("cssText", "height: 0 !important;");

Using "cssText" as the property name and whatever you want added to the css as it's value.

Upvotes: 5

user3556813

Reputation: 213

Another Easy method to solve this issue adding style attribute.

$('.selector').attr('style','width:500px !important');

This will solve your problem easily... :)

Upvotes: 20

mahendran

Reputation: 11

no use.suppose if i have some css properties in style attribure.it won't work.so please use below code

 var styleAttr = $("#divAddDetailPans").attr('style');
        $("#divAddDetailPans").removeAttr('style');
        $("#divAddDetailPans").attr('style', styleAttr.replace('top: 198px !important', 'top: 78px !important'));

Upvotes: 1

abhiklpm

Reputation: 1653

This will work like a charm

    $( '#divL3' ).css("cssText", "height: 0px !important;")

here's the fiddle http://jsfiddle.net/abhiklpm/Z3WHM/2/

Upvotes: 2

Zainul Abdin

Reputation: 835

First Id is unique identifier, therefore you don't need to search div by it's class name. therefore you can filter div by it's id.

Try following code

first add new Class property below myClass like this

<style>
            .myclass{
                height:50px !important;
                border: 1px solid red;
            }
            .testClass{
                height: 0 !important;
            }
        </style>

it will override height property of myClass

now just add this class to div

$('#divL3').addClass('testClass');

but making height "0" wont hide content of "divL3". you rather try to hide overflow content or hide entire div by adding css property display:none

hope it will work for you.

Upvotes: 1

Krish R

Reputation: 22721

Can you try this method,

        <style type="text/css">
        .myclass{
             height:50px !important;
        }
        .newclass{
             height:0px;
        }
        </style>

Jquery:

  $('#divL3').removeClass('myclass').addClass('newclass');

Upvotes: 0

TGH

Reputation: 39258

$('#divL3.myclass').attr('style', 'height:0px !important');

Would something like the above work?

Upvotes: 1

Praveen

Reputation: 56509

inline style fails to override the !important given in stylesheets.

Therefore !important can be overridden only by using !important along jQuery

Try like

$('#divL3.myclass').attr('style', 'height: 0px !important');

Upvotes: 4

Ayyappan Sekar

Reputation: 11475

There is another trick to get it done!!! Can you remove the myclass from the element and apply the height. Like

$('#divL3.myclass').removeClass('myclass').css('height', '0px');

Upvotes: 1

Fendy Kusuma

Reputation: 672

Try This :

$( '.myclass' ).each(function () {
    this.style.setProperty( 'height', '0px', 'important' );
});

.setProperty () enables you to pass a third argument which represents the priority.

Upvotes: 38

legendofawesomeness

Reputation: 2911

Have you tried this?

$('#divL3.myclass').css('height', '0px !important');

Upvotes: -5

How to override css containing &#39;!important&#39; using jquery?

Answers (15)

Related Questions

How to override css containing '!important' using jquery?