Components: Dynamically growing input field's height to fit content

Sometimes you will need an input field which wraps content and grows in height as soon as content gets longer than the input fields width.
There is no way to get a "normal" string input field to wrap as desired, but there are other ways.

Here is one pretty easy solution to get what you want:

Step 1

Let your input became a text area with one row.

f.text_area(:name, rows: 1, autosize: '') 

Step 2

Include the autosize Show archive.org snapshot library in your project

yarn add autosize

And make your textarea(s) grow (and shrink) automatically.

up.compiler('textarea[autosize]', autosize)
Natalie Zeumann About 2 years ago