CODEWITHSUNDEEP
javascripthtmljquerycss
Parag Kadam
Parag Kadam

Reputation: 3850

Modify and remove CSS class property using JQuery

I am trying to remove the property min-width from the class ui-widget-content and trying to modify the property from width: auto !important; to width: 250px; for class ui-dialog.

Please note that these 2 changes should only be applied to the parent of childDiv and the implementation of the classes ui-widget-content and ui-dialog should be untouched elsewhere.

Any suggestions would be really appreciated.

<div class="ui-widget-content ui-dialog">
    <div id="childDiv">
        ...
    </div>
    ...
</div>

.ui-widget-content {
    min-width: 360px;
    ...
}

.ui-dialog {
    width: auto !important;
    ...
}

What I tried(With no success):-

For removal:

$("#childDiv").parent('.ui-widget-content').removeAttr("min-width");

For modification:

$("#childDiv").parent('.ui-dialog').css({"width: 250px"});

Upvotes: 0

Views: 255

Answers (3)

Mingze Li
Mingze Li

Reputation: 390

I also met similiar situation as yours. Firstly, you cannot change css class itself using jQuery. Secondly, I will use new class to overwrite those parameter and easy to control. For your requirement in the example I will do like this:

Add new class:

.ui-widget-content-change {
      min-width:0px !important;
 }
.ui-dialog-change {
      width: 250px !important;
}

Then apply jquery

 $("#childDiv").parent().addClass('ui-widget-content-change');
 $("#childDiv").parent().addClass('ui-dialog-change');

When you don't want to use them, just remove those classes.

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

You have two issues. Firstly min-width is not an attribute, it's a CSS property, so calling removeAttr() will have no effect. To reset the property you need to use the css() method.

The second issue is with your use of css(). You can provide an object to it, however the syntax you're using in the object is invalid. You should provide a separate key and value, not a single string. Alternatively, you can provide the key/value of the property to set as separate arguments.

To correct the issue, try this:

let $childDiv = $("#childDiv")
$childDiv.parent('.ui-dialog').css('width', '250px');
$childDiv.parent('.ui-widget-content').css('min-width', 'auto');

More informaotion on the use of css() is available in the jQuery documentation

Upvotes: 3

Martinaut
Martinaut

Reputation: 2297

You cannot modify the content of CSS-files using jQuery. With jQuery you can only modify the styles specified in the styles-Attribute of an element.

$("#childDiv").parent('.ui-dialog').css('width', '250px'); adds style="width: 250px" to the parent div with the ui-dialog class. However this will not change the width, as you have marked width in the CSS-file as important.

Upvotes: 0

Related Questions