Is there a way to completely hide minimized panel?

[akphi]

Hi @leefsmp,

When you resize a panel to the minimum, due to flexGrow cannot seem to be set to 0, you will get a little slice of the panel being shown (in the following example, you can see the black line on the left)

Is there a way to get rid of this? If the user is trying to resize by dragging, I can hack onStopResize to round the flexGrow to 1 or 0 if the flexGrow is within 0.99 - 1 and 0 - 0.01 respectively; if the size is set programmatically, I could potentially create a listener on the elements and round their flexGrow.

My use case is still very basic for the most part, I just have 2 elements per container, I guess if there is a prop at ReflexContainer level to enable rounding or if we could expose a handler when the size is updated programmatically (rather than by user's mouse drag action), I could figure something out.

I could see when multiple panels come into play, this might get tricky, but I imagine you must have thought about this case before so I want to know if you have some solutions/considerations in mind.

As always, thank you so much for this lovely library, I couldn't say how much I appreciate your putting effort and thoughts into this 🙏 !

[leefsmp]

Unfortunately I don't have a good workaround for hat scenario. What I'm doing usually is to set the minSize to few pixels so it never happens to have a very tiny visible space on the panel. Another approach is to have the complete panel visibility triggered by another button, so if user disables completely that element it's just not part of the layout.

If the size is updated programmatically I would assume it's your app responsibility to be aware of that and act accordingly.

You could set display: none on the reflex element but that could become a bit hacky.

[akphi]

@leefsmp Yeah, I do use the minSize trick too, but there are places that I actually want to hide the whole panel. Your suggestion is on-point there: if I control the size and set it programmatically, I could set a class .element--minimized with visibility: none, and onStartResize I can clear that class on the element. display: none won't work very well it seems.

But even visibility: none is just a hack, the tiny space is still there, just that its content is no longer visible so the tiny space seems like a line. So I want to check with you if you consider this an issue at all? If so, could we create a config at container level to do rounding for the flexGrow - I could potentially help with this if you give me some guidance, or if you don't want to have that in the library, is there a way for me to do it in my app: e.g. have a way to react upon element size recalculation, so maybe something like onSizeUpdate for ReflexContainer, where I can have access to all the child ReflexElement. onSizeUpdate would be different from onResize in that it triggers when there's a flex data recomputation (unlike onResize when there's mouse action) - I guess in some way, this is related to https://github.com/leefsmp/Re-Flex/issues/142

[tom-james-watson]

I managed to workaround this buy dynamically applying some extra CSS when I want to collapse:

• On the collapsed element, set display: none
• On the other element, set flex-grow: 1 !important;

In my case just removing the element from the DOM doesn't work because the element would lose state and rerendering it has a performance hit. Obviously this only works if your container only has two elements.