Alert element has conflicting CSS

Beta
#1

Hi @alexander

When we add the Alert element, it has the background-color and the text-shadow inherited from the x-alert CSS.

Due to that CSS, the background color and text shadow settings are not working unless removed with custom CSS.

On the sidenote, I am trying to have an Alert element in the Header container. Once the Alert toggle is clicked, I’d like the entire bar/container to collapse to zero, but after setting its height to Auto and removing the paddings, it still has a minimal 20px height. would there be a clean way to make it completely gone?

Thanks!

#2

I see, I think something in the enqueue/css generation priorities might be off there. It should output the generated CSS after the x-alert CSS, allowing the new style to take precedent. I’ll take a closer look there.

It’s a bit nuanced but that leftover 20px comes from “Content Sizing > Gutters”. Bars were never really meant to fully collapse. While it provides some external spacing, the CSS is also preventing an auto height bar from collapsing. Definitely possible to get there though. Putting it all together, this would help get the effect you need:

  • Set Bar Height to auto
  • Set Bar Gutter to 0px
  • Set Container Padding to 20px (or whatever you need to space the Alert)
  • Add element CSS to the Container to hide it when the Alert is removed
$el:empty {
  display: none;
}
1 Like