Why is styling of custom role overridden?

Anvil Q&A
1

I’m always struggling with borders and padding in Anvil.

I have a custom role section-header that I have applied to a Label. A have a custom css asset that defines the CSS styling. It all works technically but I’m unable to obtain the desired result, which is simply: a label with a bottom border without padding.

The problem turns out to be that the styling of the custom CSS is overridden by Anvil.

.anvil-role-section-header {
  color: darkgrey;
  font-size: 1.2em;
  padding-bottom: 0px !important; 
  border-bottom: 1px solid lightgrey;
}

The border works but there still is a padding. It turns out that is because my custom style is overridden by some other stylesheets:

Screenshot_2020-11-02_at_16_45_37
Screenshot_2020-11-02_at_16_45_371298×1530 235 KB

Even adding the relevant styles to my custom sheet will not work.

.anvil-label>.label-text .anvil-role-section-header {
  padding-bottom: 3px;
}

because, of course, this does not change order of the application of the stylesheets.

It is puzzling to me that my custom style is overridden by any style. Is there a way to force my stylesheet to the top?
Or any other hack to fix spacing?

2

Thanks for your question @mjmare!

There are a three things to keep in mind when working with separate CSS stylesheets in Anvil.

If you’ve added a separate stylesheet custom_stylesheet.css, you need to remember to add it to the Native Libraries as well - ie add a line there:

<link rel="stylesheet" href="_/theme/custom_stylesheet.css">

Another thing you need to keep in mind is which exact style you are overriding. In this case, I think what you want in your custom CSS sheet is:

.anvil-role-section-header> .label-text {
  color: blue;
  font-size: 1.2em;
  padding-bottom: 0px; 
  border-bottom: 1px solid lightgrey;
}

(no need for the !important)

And finally you need to add your custom style to Roles so that your Form can use it.

I’ve made a clone link here: a clone link here that I think does what you’re after - let me know if this helps!

2 Likes
3

I thought I had done everything right. And I did, except understand CSS priority rules. Sigh.

I had not realised that

.anvil-label>.label-text {
}

if more specific than

.anvil-role-section-header {}

so my custom styles would not take hold. From your example I changed it to:

.anvil-role-section-header> .label-text {
:
}

and that works. Thank you!

1 Like
4

Glad to be able to help!

1 Like