Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
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?) –  3nafish Apr 20 '13 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 '13 at 9:58
add comment

2 Answers

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.

share|improve this answer
    
This works for Text Areas which are nevertheless re-sizable. –  Salman Apr 20 '13 at 3:16
    
Thank you @Salman, I should have made that clear in my answer to begin with. –  Dave Nelson Apr 20 '13 at 3:23
add comment

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

share|improve this answer
    
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 '13 at 12:13
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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