Chat input expand

Need help Responsiveness
1

Hi all,

I’ve built a chat function. The input line is a single line input - I need the ability for the input to expand to 3 lines when needed, just like WhatsApp messaging etc.

Does anyone know how I can do this?

2

Hi, you can use a multiline input with just a max-height (depending on the font size of your input) and fit height to content checked.

3

But max height will stop it from expanding when needed to, so this wouldn’t work?

4

Let’s say you have a multiline input with 14px font size, 1 line-height and 72px max height. Then the multiline will expand for 3 lines and after that will add a scrollbar.

5

This doesn’t quite work from a UI perspective:

The multi-line input element is about 1.5x the height of a normal line, and the text is aligned to the top… So it doesn’t look very good.

I somehow it need the height to be a single line’s height (doesn’t seem possible with multiline?), then expand when needed