You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hi guys, I've been trying to find an ideal solution for this problem, but I can't find anything simple enough.
I am trying to hide an element based on if it would wrap from overflow dynamically.
Situation
I would like to hide a navbar and show a button to toggle a slide-out navbar if the navbar breaks due to the children overflowing the element.
I know that there are many "common" solutions, like using screen size media queries, but the app we're working on has a dynamic navbar, and its content changes constantly.
What I've considered:
-Using refs on each element to calculate the size of the navbar and its children on resize. (We're working with a structure where components don't directly have child components in the same file, so working with 2 elements at the same time requires using refs, hocs, or custom hooks, but it can quickly get messy).
I am aware of these properties, but am not sure how I could combine them to resolve the solution:
overflow classes (If we know when an item would overflow, is it possible to set the hidden class when it happens?)
max-height or width (If we can set a max height or width, we should also be able to set a hidden class when it reaches the value?)
wrap?
Flex wrap?
I would ideally like to use a CSS-only approach or a lightweight approach with a simple calculation function on 2 refs.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Hi guys, I've been trying to find an ideal solution for this problem, but I can't find anything simple enough.
I am trying to hide an element based on if it would wrap from overflow dynamically.
Situation
I would like to hide a navbar and show a button to toggle a slide-out navbar if the navbar breaks due to the children overflowing the element.
I know that there are many "common" solutions, like using screen size media queries, but the app we're working on has a dynamic navbar, and its content changes constantly.
What I've considered:
-Using refs on each element to calculate the size of the navbar and its children on resize. (We're working with a structure where components don't directly have child components in the same file, so working with 2 elements at the same time requires using refs, hocs, or custom hooks, but it can quickly get messy).
I am aware of these properties, but am not sure how I could combine them to resolve the solution:
I would ideally like to use a CSS-only approach or a lightweight approach with a simple calculation function on 2 refs.
Let me know if you have an answer.
Beta Was this translation helpful? Give feedback.
All reactions