How can I make an element's height zero in Bubble when it contains no text?

takapochipochi1998 · 2025-04-14T13:46:46.133Z

How can I make an element’s height zero in Bubble when it contains no text? I have set a background color and padding, but the height from the padding still remains.
I have configured the following settings:

Checked ‘Fit height to content’
Set ‘min height’ to 0
Checked ‘Collapse when hidden’

ademiguel · 2025-04-14T14:41:25.317Z

You have two options, both with element conditionals

Hiding the element completely
Setting the padding to 0

image348×360 18 KB

The thing here is defining the conditional. What element are you dealing with?

takapochipochi1998 · 2025-04-15T02:40:31.650Z

Thank you for your response.
I’m using a text element where the text is dynamically set from Data, with a background color and padding applied.
Below is a screenshot of the element.

スクリーンショット 2025-04-15 11.36.04381×870 119 KB

スクリーンショット 2025-04-15 11.36.23378×863 108 KB

スクリーンショット 2025-04-15 11.36.34368×732 91.7 KB

スクリーンショット 2025-04-15 11.36.51371×272 36.1 KB

スクリーンショット 2025-04-15 11.39.36239×346 21.4 KB

betteredbritain · 2025-04-15T07:23:03.559Z

You have the layout setup correctly ‘Collapse when hidden.’ All you have to do now is set a condition such as when ‘dynamic value is empty’ then ‘this element isn’t visible: check’

ademiguel · 2025-04-15T08:48:23.259Z

You can’t directly refer to This Text's content to set the condition, but you can use the exact same dynamic expression you are using for defining the content of the Text element and check whether or not it’s empty, just like @betteredbritain has proposed

takapochipochi1998 · 2025-04-15T09:15:32.483Z

Thank you so much!
I was able to hide the text element by configuring it as shown in the image.

スクリーンショット 2025-04-15 18.14.37358×528 69.6 KB