Fade right side of the text of a material design like input
I'm trying to improve my UI so the user understands that there is more text than what he sees on the screen. I had a couple of ideas:
- Fade right side of the input
- Place 3 dots if the text is longer than the field
This is the current state:
The problem is when the user selects the text or goes to the end of the text, the fade is still visible, and this is unwanted. It results in confusing the user more than it helps. I can probably fix this with js but first I want ideas how to improve the user experience before actually implementing it.