CSS Seems To Have Stopped Working

Anvil Q&A
1

The first one works (but it’s centred), the second one doesn’t make any difference, no matter how small I make it :

.anvil-role-max-form-width-600 {
  max-width: 600px !important;
  margin-left: auto;
  margin-right: auto;
}
.anvil-role-max-form-width-600-not-centred {
  max-width: 600px !important;
}

The CSS matches the role name. It appears to have just stopped working (about a month ago, but I’ve only just started to look at it).

What should I be doing?

2

Can you share a clone link? I vaguely remember having to tinker with max-width a while ago

3

That’s weird! But if you modify these values in chrome dev tools, do they get applied?

4

edit - I’m using the original Material theme (it’s an old app), so that might have some bearing on it.

So the element is this. I renamed the role to “m600” for simplicity. You can see from this element that the role is in the DIV.

What you can also see below is that I manually added the style to change the width, and that worked ok.

But with the CSS set to this (and the “style” removed) :

.anvil-role-m600 {
  max-width: 200px !important;
}

and the role set to this :
image

it doesn’t.

I’ll try and re-create with a minimalist app…

<div class="anvil-spacing-above-none anvil-spacing-below-small anvil-role-m600 column-panel anvil-container col-padding-medium anvil-component has-components belongs-to-PPNIZR" anvil-role="m600" style="max-width:400px;">
5

It works fine with a new project, so it’s something either specific to me or the css environment where it used to work may have changed.

If it’s neither of those then god knows …

6

Maybe try to apply the css at runtime with jQuery to narrow/broaden the scope of the issue and/or as a workaround.

7

I wouldn’t just check if the role was applied, but also checking the css code getting applied in the inspector. That might help narrow things down.

1 Like