Increase alert size using a role

Anvil Q&A
1

Continuing the discussion from Increase Alert Size:

What I’m trying to do:
I am trying to create a large alert that is only set by a role.

What I’ve tried and what’s not working:
Combining a few other snippets we have come up with the following approch which unfortunately does not work.

This has been pasted into the theme.css asset

@media (min-width: 768px) {
  .anvil-role-xl-alert .modal-lg {
      width: 90vw;
  }
}

The role is then attached to the alert by setting the role argument in the alert constructor:
alert("content", large=True, role="xl-alert")

Is this the right way to approach this? If so, what could be causing this not to work?

2

nearly there

@media (min-width: 768px) {
  .anvil-role-xl-alert.modal-lg {
      width: 90vw;
  }
}
3 Likes
3

Just so I understand this, the space between the selectors separates them instead of looking for modal-lg attached to the component with the role attached?

4

The space between means you are trying to select a descendant of the first class. So this:

  .anvil-role-xl-alert .modal-lg {
  }

is looking for elements with the modal-lg class that have a parent with the anvil-role-xl-alert class. Removing the space, however, means you are selecting elements that have both of those classes.

I hope that makes sense. May I suggest this handy guide to using CSS in Anvil? It has a section on CSS selectors and was written by some really cool person:

2 Likes
5

Ok I get dit now thank you… And might I say that guide is extremely helpful… thank you