8

I'm having some issues when the user types extensive text in a small input field.

I need some good way to display data that will be cut off.

I tried to use a Bootstrap based Tooltip or Popover on hover but I'm already using this kind of component for validation.

Here's an example of what I'm talking about.

<input type="text" style="width: 50px" value="xxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxxx">

Is there a good way to display all the data inside this input?

Improve this question
3
  • Can you provide some more context? Why does the component have to be so small? (Is it for a mobile display? Is there a lot of data displayed on the screen that can be edited in-line? Are there other external constraints on the layout?)
    – Graham Herrli
    Apr 20, 2013 at 1:03
  • I have seen a couple of examples now of controls that color the text that would be truncated. Makes it very obvious, especially if combined with a character count indication of how many characters left / too long.
    – Marjan Venema
    Apr 20, 2013 at 9:58
  • Why is this not a text area?
    – DarrylGodden
    Jul 22, 2017 at 21:47

3 Answers 3

Reset to default
4

I had came across this issue a few months back and I tried to find its solution. To me the best and most inexpensive solution is to place the text underneath the input field and only do so if entered text gets longer than the width of input text. This shouldn't be done unless entered or displayed information is important and there is risk of mistake if entire text is not displayed.

enter image description here

Improve this answer
1
  • This is okay, but I can imagine novice users (who hunt and peck the keyboard) will look up to their screen, see this text and think that is where they have entered their input. It would be difficult for such users to edit their input -- they may well click the text, press backspace and lose their entire entry.
    – Brendon
    Apr 20, 2013 at 12:13
3

You could use a textarea instead of a text field and then use a jquery plugin like Autosize to allow the field to grow as needed.

Improve this answer
2
  • This works for Text Areas which are nevertheless re-sizable.
    – Salman Ehsan
    Apr 20, 2013 at 3:16
  • Thank you @Salman, I should have made that clear in my answer to begin with.
    – Dave Nelson
    Apr 20, 2013 at 3:23
2

I would use the title to allow the user to hover over the input and view all of the text.

Example:

<input type="text" 
       title="something that exceeds the width of the box" 
       value="something that exceeds the width of the box">
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.