Hide label and shrink space

Wasn't sure what to call this one. I want to hide a label based on a value of 0, which is the easy part but I want the space to shrink/disappear. For example a column container, even if you 'hide' a label the space is still reserved, albeit empty. The only way I can do it is set the height of the label to 0 and also change the text size to 0.

Is there an alternative way I'm missing ??

What type of container is it in?
Is there anything else in the column? Is a column container the right approach for what you want to do?

If the label is in column 0 and is 3 columns wide and the value is in column 4 and is 9 columns wide then hiding or showing the label (or anything else in columns 0 through 2) isn't going to move the value (or anything else in columns 4 through 11).

If you have the label and the value in the same column ... that isn't the way that I've used columns before.

Its a column container, a list of items going down horizontal. If an item is zero I want to hide it, which is easy but it leaves a space in the list. Setting the height and text to 0, closes up that gap so it appears like it was never there, Just wondered if there was a easier way.

I think no matter what container you use, if you hide a item using the visible prop the place holder stays and occupies the same space, you just cant see it.

What happens if you bind to position.display instead of Visible?

Figured it out, when you mentioned position.display that helped me with a search and found the solution.

Items wont collapse directly in a column container but if you put them inside a flex then add position.display = false and bind to it they will hide and collapse.


1 Like