Wrapper Component

Hi

I realized that most of the existing container or grid components are having a default z-index of 30. So when I use those to wrap content for a global componet I am having to much props set.

Maybe something like the mui Box in react would be nice. A plain div with only custom classes and a drop zone to throw stuff inside. I need to create that custom componet on most of my projects all the time.

Use case:

  • Nav Bar (z-index 20)
  • Background of Navbar (z-index 15)
  • Hero Banner (z-index 16)

So when scrolling down the navbar would be on top of the hero and when sliding out the background becomes visible. Navbar and background should be fixed on top of the screen. If you try to create a global component it wont work except when building a custom component.

This is something we’ve run in to, and I have been thinking about if/how we could make this a bit more obvious/robust/easier to fix.

What you can do for now is: on the Container(s), if you set the Layout->Isolation property to Isolate it should fix your issue.

1 Like

will give it a try

1 Like