Multiline input "stretch to fit content" defaults to 2 lines

Anybody else use a multiline input set to “stretch to fit content”, and see it default to an input height to 2 lines? Is there a way around this so the default input height is 1 line, until the user types >1 line?

Here is the editor view (height of 23 px):

Here is the live preview (“min-height” is still 23px, as seen in web inspector; but “height” is already at 36px):
image image image

Here is the live preview if you unselect “stretch to fit content” - the unnecessary height disappears.

Thanks :slight_smile:

Solved it. The default number of rows is “2” (2em) for a “textarea” html tag, which is what a bubble multiline input is made of. To change the number of rows to “1” (1em), add the css below into your bubble header (< and > symbols enclosing the words “style” and “/style”, of course).

height: 1em !important;

But, if you want 1 row by default and your multiline input to stretch to fit content, the way to go seems to be with a bit of javascript, as below. You’ll need to adjust the bolded text to fit your project.

document.getElementById(“IDAttributeForMultilineInput”).rows = “1”;

1 Like

Thanks for sharing!

On the same topic, I wonder how we can make the multiline input expand upwards and not downwards, and up to a specified maximum number of lines?

No text: 1 line

Some short text: expanding from 1 to 2, then 3, then X lines

Long text: limited to 5 lines + scrollbar

@Lucien I would love to know if you or anyone else can work this out? Stretching the input container upwards will probably be my challenge to tackle, soon :slight_smile: Will keep updated if I find a solution.

1 Like

Just gave it some more thoughts, I guess it’s achievable with this (paid) plugin by setting conditions based on the multiline input’s value’s number of characters, which would both move up and resize the multiline input element.

Hello I am struggling the get this work, tried both css and javascript and it doesn’t work for me

Any suggestion please?


@yanisbensalem, If you provide a publicly accessible example, I’ll see what I can do.

I’m unsure how I can help without more information on your end.

Thanks a lot for your feedback :wink:

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