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

Need help
1

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):
image

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.
image

Thanks :slight_smile:

2

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).

style
bubble-element.MultiLineInput{
height: 1em !important;
}
/style

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
3

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

image
image382×506 25.7 KB

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

image
image384×550 34.5 KB

Long text: limited to 5 lines + scrollbar

image
image381×583 35.7 KB

4

@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
5

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.

6

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

Any suggestion please?

Thanks

7

@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.

8

Thanks a lot for your feedback :wink:


9

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