How can I set an input box to be responsive to user input?
I want the input box for the whole number to be small, like the size of one number because that's what will most often be typed in. But if the user does type in more than one number, I would like the box to grow so their whole number is displayed.
I've tried using clamp, flex-grow/shrink/basis but nothing is working. I think those things only make it smaller at smaller screen sizes. I have the width set to 80px because that's the only way I've found to make it not obnoxiously big.
Deployed Project: https://mathvisuals.netlify.app/frac-div Github: https://github.com/mathematiCode/Math-Visual-Library
Deployed Project: https://mathvisuals.netlify.app/frac-div Github: https://github.com/mathematiCode/Math-Visual-Library
GitHub
GitHub - mathematiCode/Math-Visual-Library: A library of math visua...
A library of math visuals for K-12, mostly fraction operations - mathematiCode/Math-Visual-Library
5 Replies
I would have thought that the only way you could achieve this is with JavaScript.
A very simple way to do this can be seen in this pen :
https://codepen.io/shshaw/pen/bGNJJBE
In this pen they hide the input element and assign it's value to a data attribute the parent element using a single line of JS.
The CSS then uses this data attribute values as it's content, thus allowing the element to grow and shrink.
Thank you! It's going to take me a minute to understand this but it's very cool! I thought it would be easier 😅
fyi, there is
field-sizing: content which makes the input field size to the user input, but it's not fully supported yet (only chromium browsers)
https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizingMDN Web Docs
field-sizing - CSS: Cascading Style Sheets | MDN
The field-sizing CSS property enables you to control the sizing behavior of elements that are given a default preferred size, such as form control elements. This property enables you to override the default sizing behavior, allowing form controls to adjust in size to fit their contents.
Ooh yes this is what I want! I’m surprised it’s not fully supported yet. I thought this would be a more basic thing to do.
its something that just become available in chrome/edge at the end of last year, so hopefully the others join soon