Search code examples
javascriptcssmaterialize

Why isn't this adding the class in the way I expect?

I've got a Meteor project and am using the Materialize UI. I wanted to change to look of the modals by adding a unique border around them so I found out what the Materialize class was for the modals and added some CSS

.materialize-modal {
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, white 0, white 25%, #58a 0, #58a 37.5%, white 0, white 50%) 0 / 5em 5em;
}

But this, of course, changes all the modals. My intent is to only use this on some of them. So I thought that if I added a class when a modal is triggered (a modal where I don't want the special border), I could just add a class upon triggering:

$('.materialize-modal').addClass('plain');

and now with the CSS:

.materialize-modal:not(.plain) {
padding: 1em;
border: 1em solid transparent;
background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, white 0, white 25%, #58a 0, #58a 37.5%, white 0, white 50%) 0 / 5em 5em;
}

No luck here. I would guess that using 'addClass' isn't adding the class in the way I imagine; it's perhaps looking for the 'plain' class and trying to apply the CSS to it. The 'plain' class doesn't have any CSS associated with it. It's just there to prevent the borders on some of the modals with the thinking that the ':not' selector would see the added class. Any way to do this?

Solution

  • Most likely, you have applied the Css class to the wrong element or jQuery can't find the element and that's why it hasn't been added to it.

    Check that jQuery can find the element

    console.log($('.materialize-modal').length); //If 0 then it can't find the element

    If length is 0 you may need to call the code inside setTimeout(function() {},0); If length is 1 and there is still an issue.

    Use chrome Dev tools (f12) and inspect the modal to check the class is actually on the modal.

    If the class is on the modal then the CSS is the issue, you perhaps need to change your css to:

    .materialize-modal:not(.plain) .modal-dialog {
    padding: 1em;
    border: 1em solid transparent;
    background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, red 12.5%, white 0, white 25%, #58a 0, #58a 37.5%, white 0, white 50%) 0 / 5em 5em;
  }