I want to make a input field which can resize itself[solved]

Question

When I type and the text gets to the edge of input field it should automatically resize and height should be increased like in this article of css-tricks it is given in other ideas section but I can't understand the code😔

https://css-tricks.com/auto-growing-inputs-textareas/

Answer 1

Yash Arora🇮🇳 instead of figuring out how to apply that functionality to built-in input method you can use a custom one by setting a container(div) to be editable using content editable attribute and applying any other functionality you want using js ,

https://code.sololearn.com/WjT7W0r7U73l/?ref=app

Answer 2

div{
min-height:30px;
width:100px;
display:inline-block;
background-color:orange;
}

Answer 3

Abhay I didn't understand how this will work

Answer 4

Yash Arora🇮🇳 Elements with display set to inline-block automatically resizes themselves according to content in the x direction,

Now the above code has set a fixed width of 100px and min-height of 30px ,anything set to fixed won't grow but using min tells browser to expand it's size if the content inside it grows,and actually you can remove display: inline-block and it will still work fine

Answer 5

Abhay But I want a input field cause user will type in it

Answer 6

You can do the same with input field ,show your code so I can understand better what you want to do

Answer 7

https://code.sololearn.com/Wr465nv2fT3P/?ref=app

Answer 8

Yash Arora🇮🇳 so you want that input field to grow vertically right?

Answer 9

Abhay Yeah when the input grows it should not be scrollable instead the height should increase

Answer 10

Umm sorry Abhay but I saw that the code snippet given on page I mentioned had a button to see the css file and now I have copied the code and will get in detail

https://code.sololearn.com/Weu04I3V7Gdd/?ref=app

Sorry if I bothered you

Answer 11

Yash Arora🇮🇳 sorry i can't help!!, this is much harder than I thought it to be ,the actual input element consists of some other element that expands horizontally and I know nothing about how would you go on altering this behaviour,

Answer 12

Abhay but if you have some another way pls tell me

Answer 13

Abhay no worries

Answer 14

Abhay thank you really I was getting sad cause of this idk why but thanks