[New Feature] Version 8: Multiline input stretched defaults to one line

Hi all,

We’re going to be changing the “Stretch to fit content” property on Multiline Inputs.

Previously, if the multiline input was drawn as one line tall with this property selected, the input would appear as the two lines tall when it had one line of content or was empty. The new version changes this behavior so that multiline inputs with “stretch to fit” checked and which are drawn as one line tall will appear as one line tall by default, unless the content exceeds one line. In the below screenshots, the multiline Inputs are identical except the one on the left has “Stretch to fit content” selected and the one on the right does not.

Version 7:

Version 8:

Later today, we’ll be deploying this functionality in a new version of Bubble that you will have to upgrade to in the “Settings” tab of the editor, under “Versions”. We’re deploying this as a new version because, if your app uses multiline inputs sized for one line with “Stretch to fit content”, this change could affect your app’s appearance. Please double-check your multiline inputs before upgrading if you use relatively short multiline inputs!


Thank you! This used to be really annoying, glad it’s fixed :clap:

1 Like

Hello @jonah!
Thanks for the update!

A quick question.
Does it affect the HTML elements as well? Thanks!

@lottemint.md It won’t be affecting HTML elements, only Multiline inputs.

Welcome @jonah and thanks for this update.

1 Like

Thanks for the info!
May I know if there is a way to apply the same update for the HTML elements, please?

@lottemint.md I’m afraid I don’t understand what you mean by applying the same update to HTML elements as they are very different than Multiline inputs. If you’ve found a bug with HTML elements, can you please share it in a bug report? https://bubble.io/bug_report Thanks!

Thank you! Such a small thing but sooo important to good UI. Thank you so much for addressing this

1 Like

Check out the following screenshot, please:

No bugs. I’m just curious if you can update the Stretch to fit content property of the HTML element.

Finally I can put my custom CSS to rest, thanks guys

Awesome feature @Jonah !
I was wondering is there a way to stop stretching to fit content at a custom size in the conditional settings ?
For example for a messaging service, I am glad to stretch to fit content but you still need to see other messages above. So you need to stop stretching.
Is there a way to do that ?

@seeyu.pro You may want to experiment with putting the element with Stretch to fit content checked within a group. This should allow greater customization of this sort of behavior

Thank you for answering @Jonah , but I am not sure to understand because I have not seen any option to have a max width on a group. And I will need my group to have a dynamic height too, if I put my multi input inside of it.

@seeyu.pro This should be helpful. It can be applied on a group from the property editor: https://bubble.io/reference#Elements.GeneralConcepts.Responsive.use_max_width

I believe the group should stretch with the content contained inside. If it’s not working as you expect, I’d recommend making a forum post about it to see the different ways other users have handled this.

Thank you @Jonah !

Hello @jonah, I have a similar question to @seeyu.pro above:

I would like the multiline to stop stretching beyond certain height. When there is a lot of text, I want the multiline input will stretch from one line to maximum of half a page and stop stretching beyond that if the user continues typing or else the multiline input will eventually cover the whole page.

Is this achievable?

@yongling.chow I’m fairly certain this is achievable, but I’m not sure how to do it off the top of my head. I’d encourage you to explore the forums to see what other users have done. If you can’t find anything, check out https://bubble.io/support.

1 Like

Thanks @Jonah, I have had the chance to play around and I’ve managed to achieve this. For anything looking to do the same, I did the following:

  1. Expose ID of the multiline input element
  2. Use the HTML element to insert some CSS using <style></style> tags to format the multiline input
  3. Within the <style></style> tags, use max-height property to limit the expansion of the multiline input. E.g.: max-height: 30vh; if you want the multiline input element to only expand up until 30% of the height of the user’s viewport.

This is great, @yongling.chow ! Thanks for sharing it with the community :smiley:

1 Like