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

Updated . Posted . Visible to the public.

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
Last edit
Henning Koch
License
Source code in this card is licensed under the MIT License.
Posted by Natalie Zeumann to makandra dev (2022-02-18 07:53)