0px element still taking up empty visual space

Ask us anything
,
1

As stated, a 0px height and 0px width element is still taking up empty space in the UI. I don’t want to use conditional visibility (neither conditional rendering nor conditional display).

Use-case: I have a div set to flex and horizontal, with only two elements: A div and some text.

I need the div to truly be 0px and be “invisible” without using conditional rendering. It’s because I’ve set an animation that shrinks the element and conditional rendering would just make the element disappear without firing the animation.

Imperfect Workaround: I’ve set two variables (one that triggers the animation and another one that triggers conditional visibility for the element). I’ve set it up so the visibility variable is changed a few milliseconds after the animation is triggered. It looks ok when the div is shrinking and then disappears, but it looks a bit weird when I display the div again and grow it (reverse animation).

In summary, it would still be very useful to know if there was a way to truly make a 0px element invisible.

Thanks!

2

Additional info: div is a component. Discovered that components behave differently at 0px than a regular div/container. If I wrap the component with a parent div it doesn’t take horizontal space, but still shows up on top of the text.

Still need to completely hide it without using conditional rendering if possible.