search

openeuropa / bootstrap-component-library

Openeuropa Bootstrap Component Library
https://oelibrary.netlify.app/
MIT License
14 stars 9 forks source link

Content banner action bar is not visible in some scenarios #563

Open brummbar opened 9 months ago

brummbar commented 9 months ago

If the content banner has a parent element with the .container class and the banner itself has a class bg-lighter, the action bar markup will be hidden. This can be reproduced by adding the container class to the #root wrapper here https://oelibrary.netlify.app/default/?path=/story/compositions-content-banner--default . The rest of the card does not disappear as the z-index is handled correctly, but not for the action bar.

brummbar commented 9 months ago

This is the same as discussed in #562 but in that issue the whole banner is hidden due to markup changes on the implementation side. On BCL level, only the action bar is impacted.

kp77 commented 8 months ago

Hi @brummbar,

We just updated to BCL 1.2.0 (from 1.0.2) and I can confirm the issue as you described in your first comment: we have a parent element with .container class and the action bar (only that) is hidden.

I'm trying to fix it, and changing the position: absolute rule to position: relative for the :after seems to be working. I have the following override at the moment:

.container {
  .bcl-content-banner {
    &.bg-lighter {
      &:after {
        position: relative;
      }
    }
  }
}

I will come back with an update if this fix works out for our project (so far it looks ok, but we are still testing/reviewing it).

Note: this new rule that's causing the issue was added as a solution to #517 (reported by us originally, as we have a parent .container). That issue with the margin is solved by the fix, but there is this regression now with the hidden action bar.