Adjust width of input field to its input
<html>
<head>
</head>
<body>
<input type="text" value="1" style="min-width:1px;" />
</body>
</html>
This is my code and it is not working. Is there any other way in HTML, JavaScript, PHP or CSS to set minimum width?
I want a text input field with a dynamically changing width, so that the input field fluids around its contents. Every input has a built-in padding of 2em, that is the problem and second problem is that min-width ain't working on input at all.
If I set width more than it is needed than the whole program is messy, I need the width of 1px, more only if it's needed.
Answer
In modern browser versions, CSS unit ch is also available. To my understanding, it is font-independent unit, where 1ch equals to width of character 0 (zero) in any given font.
Thus, something as simple as following could be used as resize function:
var input = document.querySelector('input'); // get the input element
input.addEventListener('input', resizeInput); // bind the "resizeInput" callback on "input" event
resizeInput.call(input); // immediately call the function
function resizeInput() {
this.style.width = this.value.length + "ch";
}input{ font-size:1.3em; padding:.5em; }<input>That example would resize "elem" to length of the value + 2 characters extra.