HTML text input with fixed width and auto resizing height

Question

I am wondering how to make a text input in html have a fixed width (100% of the parent or whatever - that is not really important) but as you type more the height changes to accommodate the text.

This seems to be common but I could not find any tutorial and dont have any idea how it is made.

An example of this resizing input would be Google Keep (when you write a memo): This is what it looks like when you write a little bit of text and this after you write more than a line of text.

Update: i have found a js lib that does that but would still appreciate if anyone could tell me what the main important thing to change is. Like just height of the textfield calculated based on text length? I still don't know what are the basic operations (not browser specific fixes).

The js file is Autosize.

Possible duplicate of [Creating a textarea with auto-resize](https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize) — helb, Nov 01 '17 at 17:57

score 1 · Accepted Answer · answered Nov 01 '17 at 17:58

1

Text inputs are always one line. What you want is something akin to a textarea element. The problem is, the textarea doesn't resize automatically by itself.

This was discussed before, maybe you can check this question?

Creating a textarea with auto-resize

answered Nov 01 '17 at 17:58

Florin Toader

337
1
9

1

Thank you I don't know how i didn't see this when doing the first search but I will check it out rn. – The Truth Nov 01 '17 at 18:01

HTML text input with fixed width and auto resizing height

1 Answers1