I recently came across a tutorial on how to make input type text auto-expand while also setting a specific width expand, which I found quite helpful. However, upon implementation, I noticed a few issues that need to be addressed:
- When typing in capital letters, the input does not allocate enough space, causing the text to be hidden within the input.
- During the initial stages of text input expansion, there seems to be a slight glitch where the text momentarily shrinks to the left before reappearing in its original position. Is there a way to fix this?
- Conversely, when typing in all lowercase letters, there is excessive leftover space at the end of the input.
For reference, here are two examples demonstrating these issues: https://jsfiddle.net/daw3ah0L/
Both examples contain the same number of letters, yet encounter different spacing issues.
In the first input
example, the text does not fit within the input size properly.
Whereas in the second input
example, there is an excess amount of empty space.
Lastly, I am curious to know what unit of measurement is being used to determine the size. Is it in pixels, em, or something else?