Is there a way I can change an input element so that the width of the text is shorter than the width of the input box.
Also - can I conditionally change the number of lines displayed in the input if the length of the input is wider than the width of the text area.
For example, I have an input that’s displaying a hidden password with an “eye” icon displayed - in the input - and at the end of the input - to display the unhidden text when the icon is pressed.
Currently, when the text is un-hidded, the text overlaps the eye.
I want to be able to set the width of the text so that it stops short before the icon. And any remaining text is displayed on a second line in the input. And the input conditionally expands to show the second line when needed.
I can do this with a multiline - but I can’t figure out how to handle the text width so that it doesn’t overlap the icon as well as how to vertically center the text in the multiline. And with an input, I can vertically center the text, but not expand the input to have two lines and shorten the text so it doesn’t overlap the icon.