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
Samalander
Samalander13mo ago
Here's what it looks like with inputs - my first instinct was to give them width: fit-content but that doesn't seem to work
dys 🐙
dys 🐙13mo ago
Maybe set the size attribute of the input? You should link to the CodePen so others can experiment…
Samalander
Samalander13mo ago
good 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
No description
Samalander
Samalander13mo ago
my guess is it uses ch units or something
Samalander
Samalander13mo ago
Here'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
Samalander
Samalander13mo ago
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
AimalQazi#992
AimalQazi#99213mo ago
try using width: fit-content
dys 🐙
dys 🐙13mo ago
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/bGNJJBE
MarkBoots
MarkBoots13mo ago
may i ask why you don't want it to be a content-editable <span>? Maybe there are some other options
Samalander
Samalander13mo ago
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
Want results from more Discord servers?
Add your server