Have you ever typed text into small input field and did not see the whole text at once? It can be really frustrating. Textareas can be natively resized in most browsers today, but plain old input fields can not.
To address this I have written small Angular directive. See it in action in the video below or try the Stackblitz demo.
Live demo
Tricky details of implementation
Browsers are becoming more and more standard and predictable. But I’ve run into weird behaviour in Firefox. The inputs width did not correspond to the textual content. Reason? Different implementations of Window.getComputedStyle() . Chrome returns also the “shortcut CSS properties”, such as “font”. But Firefox returns only the specific properties, such as font-family, font-weight, font-variant etc. The same goes for other composed properties, such as border etc. Be sure to always use the most specific variant, otherwise you might run into trouble.
Available on npm
Yes, my first npm package! The world is now a better place. Get it here or by command yarn add dynamic-input-width or npm -i dynamic-input-width.
Usage
- Install it 🙂
- Import DynamicInputModule in app.module.ts
- add directive attribute to input/textarea element, like this
<input [dynamicWidth]="{ minWidth: 10, maxWidth: 200 }" placeholder="dynamic width"/>
