Fit height to content through conditional


I have a multiline input with lots of text. The min height is 40px. I want it to fit height to content based on a condition. The condition is when I press a button called ‘show all content’.

Pretty simple I would say, but no idea how to do it. Anyone got some ideas?


Bubble doesn’t allow you to conditionally set height to content. Either it is on or it’s off. You can achieve this with custom javascript or you can just conditionally set the max height of the element to some higher number and you’ll have to deal with white space or a scroll within your multiline input because I’m sure this content height will be variable.

A workaround is to just have two multiline inputs. Let’s call them A and B.

Set states initialContentA+B to the relevant text on page load / button click or whatever.

A initial content = state initialContentA
B initial content = state initialContentB
Do when A’s value is changed - set initial content of B to A’s value and reset group containing B
Do when B’s value is changed - set initial content of A to B’s value and reset group containing A

This will keep both inputs synced. When show all content is clicked, hide A and show B.

This topic was automatically closed after 70 days. New replies are no longer allowed.