Modify and remove CSS class property using JQuery

Question

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"});

min-width is not an attribute so removeAttr()won't affect that property. Set it to 0 instead like in your second example. — Fabrizio Calderan
– Fabrizio Calderan, Commented Jul 9, 2021 at 8:16

Rory McCrossan · Accepted Answer · 2021-07-09 08:21:49Z

3

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

answered Jul 9, 2021 at 8:21

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

3 Comments

Parag Kadam Over a year ago

Why setting min-width to auto when that property should be removed/disabled instead? I want to replicate the same behavior when we uncheck the CSS class property in the dev tools of browser.

Rory McCrossan Over a year ago

It's because that's how CSS works. Every property is always has a value for an element, and that cannot be removed. In the case of min-width the default value is auto, which is why I reset it to that. You can find more out about it at MDN: Initial value: auto

Parag Kadam Over a year ago

I want to use the value of min-width coming from an inherited CSS class, hence making it auto is not working correctly for me.

Mingze Li · Accepted Answer · 2021-07-09 08:37:07Z

1

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.

answered Jul 9, 2021 at 8:37

Mingze Li

3902 silver badges11 bronze badges

Comments

Martinaut · Accepted Answer · 2021-07-09 08:21:42Z

0

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.

answered Jul 9, 2021 at 8:21

Martinaut

2,4272 gold badges21 silver badges30 bronze badges

Collectives™ on Stack Overflow

Modify and remove CSS class property using JQuery

3 Answers 3

3 Comments

Comments

Comments

Your Answer

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

Related