Read more

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

Natalie Zeumann
February 18, 2022Software engineer at makandra GmbH

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.

Illustration UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
Read more Show archive.org snapshot

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)
Posted by Natalie Zeumann to makandra dev (2022-02-18 08:53)