Fade right side of the text of a material design like input

Question

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:

1. Fade right side of the input
2. 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.

Answer 1

Your idea with a fade sounds good on paper, but if you found that it confuses people in certain situations, then I can think of several things:

• Remove the fade when the textbox is active, as you suggested, and TEST THIS IDEA on potential users.
• Consider not showing a fade at all. It's common text field behavior that text that is too long is cut off, and one can often tell from the content that it is cut off. Here's an example:
• If you expect this particular text field to hold long content, consider using a multiline field.
• You may also play with using a single line text field and expanding it into a multi-line one on click.

Answer 2

I would suggest to simply expand the full text at tap (or click). Moreover i would simplify the labeling if possible.

hope this helps!

Answer 3

I would limit the character limit, truncate the text and use a tooltip when the user hovers over the truncated text. This technique worked most of the time, users were able to tell quickly how to access to full text. Its intuitive and space efficient.

Edit: This would work on click for mobile devices

Answer 4

Add an expand / read more button or link at the end of the line. This way the user knows he can interact with it and view the longer text.

Can also add truncation. (Thats the three dots you're talking about)

Answer 5

Make the input an obvious input for the user. Users no how it works and behaves.

When they are not editing the text, break text to a new line so the full text is visible. Truncating is annoying and often not needed.

And when editing: (It's not a big issue that the input switches to a single line)

Answer 6

Whenever I design anything with text in focus, I prefer to go to basics. How will I write it on paper?

So in this case, if I will reach the end of paper/line, I will wrap it to a new line and it will be easy for readers to see it and read it.

While editing, It might be underlined by a border in text field, so users can comprehend that there is more text here.