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.
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!
@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!
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.
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.
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.
@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.
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:
Expose ID of the multiline input element
Use the HTML element to insert some CSS using <style></style> tags to format the multiline input
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.
