Automatically resizing input
I'd like to achieve this effect where a user can type in text into specific areas of a paragraph. I found a way to get the desired effect, but it uses a
contenteditable <span/> element. I would like to use a <input/> element, but I can't find a way to make it have the same automatically resizing effect.
Anyone know how I could solve this?11 Replies
Here's what it looks like with
inputs - my first instinct was to give them width: fit-content but that doesn't seem to workgood idea, but it doesn't seem to be a 1-to-1 for characters to text - here I have the size set to 3 and 3 characters
my guess is it uses
ch units or somethingHere's one way I just found of doing it:
https://css-tricks.com/auto-growing-inputs-textareas/
Unfortunately, it's kind of janky - let me know if anyone finds a better way
Chris Coyier
CSS-Tricks
Auto-Growing Inputs & Textareas | CSS-Tricks
By default, and elements don't change size based on the content they contain. In fact, there isn't any simple HTML or CSS way
Ok, so I tried out using that method, and it doesn't work since it takes a second for it to update - it's not smooth enough to use in an actual app
try using width: fit-content
fit-content doesn't work.
@Samalander, you tried the method used in the final example? It seems pretty performant on my machine: https://codepen.io/shshaw/pen/bGNJJBEmay i ask why you don't want it to be a content-editable <span>?
Maybe there are some other options
This is what I ended up going with - I just was hoping it would be more semantic and accessible
You also can’t do all of the form actions on the spans like placeholder or getting it’s value quickly