I have a floating header that dynamically changes size based on its content and what the user is viewing.
this created an issue where sometimes the header is obscuring the elements underneath it. I can get around this by setting margins to keep the elements lower than the header, but this is a problem when the header size is variable.
any one have any ideas to solve this problem?
If you have things underneath it which shouldn’t be obscured, would it make sense to also add those things to the floating header?
If you can add a quick loom video to give some context that would be great.
If the header needs to have a max/min height on certain pages to not obscure things you could add conditionals for this scenario
Connect with me:
The floating Header is on the main page, the content it obscures is in a reusable. I don’t mind if the content goes underneath while scrolling, since that’s the point of it being a floating group.
the issue is that some of the information is obscured before the user scrolls, so they cant see what’s underneath it. I could solve this by adding margins to the content, the problem is the size of the floating group changes based on options the user can turn on and off.
hopefully that makes sense, I can definitely add a video soon, thank you!
the problem is that the header size dynamically but the content margins cannot be scaled dynamically. or at least I don’t know of a way.
I’m not sure how to upload a video on here, here is a picture.
The targets are the floating aspect. This is fine, but if the header box gets bigger, it obscures the information, and if it gets smaller, it creates unnecessary whitespace.
If this is a single page app, you will want to use conditionals to change the amount of margin based on the page. I am not sure if you are using custom states or URL parameters to change pages, or if you just have a multi page app but this seems like the easiest way to do it.
If you are happy to share your app and a loom video, I can help you set up a conditional quickly
This topic was automatically closed after 70 days. New replies are no longer allowed.
