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

[sherman]

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

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

Thanks

[sherman]

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”;

[Lucien]

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

[sherman]

@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 Will keep updated if I find a solution.

[Lucien]

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.

[yanisbensalem]

@sherman

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

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

Any suggestion please?

Thanks

[sherman]

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

[yanisbensalem]

Thanks a lot for your feedback

Bubble Editor - test181

Bubble - Visual Programming