14

Given a form with many input fields, some have long text which exceeds the input field width. I wish to mark those input fields in some way which indicates they have more text than is visible.

I have thought about showing an arrow icon to the right of those fields, but ruled it out, because the user might view the input from the end of it, in which case, there would be more text to the left. I wish to mark it in a way that would be the most obvious and in general-manner that would strongly imply of more text inside.

2
  • I liked the idea of expandable "search box" on focus at this site shttp://ux.stackexchange.com Oct 20, 2012 at 13:10
  • 2
    yes but it's a very very limited solution and you would have to click it to know it expands
    – vsync
    Oct 20, 2012 at 16:02

8 Answers 8

15

I had thought of a creating a slider under the input field which will indicate the current position,
something like this:

enter image description here

UPDATE:

ok, I've worked a bit and made a plugin (not for IE), take a look

4
  • 1
    that's very cool. it's essentially a miniature scrollbar for the text field, but a great solution. I was very tempted to drag the scrollbar to move around, but I doubt whether I would actually do that in real use. Brilliant, +1 (but deserves more!) Oct 20, 2012 at 22:01
  • Would an arrow at either end of the text box work as well? This could be used when you have more horizontal compared to vertical space, or if the scroll control is too difficult to notice/use.
    – Michael Lai
    Aug 20, 2013 at 0:01
  • no because an arrow doesn't show where you are
    – vsync
    Aug 20, 2013 at 9:07
  • I like the idea, but implementation seems quite complex. Maybe in 2012 that was necessary? Today it looks to me that you can check scrollWidth (total length of the text + padding), scrollLeft (which part of text is shown), and clientWidth (viewport into the text, shorter or equal to scrollWidth) to draw the scrollbar of the form input field?
    – Mitar
    Dec 23, 2023 at 22:43
12
  • Use a textarea for text that doesn't fit into a regular input field.

  • If you can't change from an input field, consider using an ellipsis (...) which can be clicked/focused/hovered over to expand the size of the input field so that it either becomes wide enough to show all text or becomes a textarea that reveals all text.

  • If you can't change the shape or size of the input field, consider using an ellipsis (...) which can be clicked/focused/hovered over to display the remainder of the input field's contents in a pop up or similar UI pattern.

  • Alter the design of your form so that text entered into input fields doesn't have to be so long that it doesn't fit into the field.

  • Why does the user see input fields already containing content? Is it editable content? If it's supplemental, consider moving the text out of the input field and into a label that sits next to or above the field.

3
  • its for a system I've made: link and I want to indicate to the user there might be more text in some of the input fields, and that indication would be dynamic. An ellipsis is nice but where to put it? the user might be in the end of the text and there would be more text to the left, so I would have to move the ellipsis location to the left side in that case..not so pretty moving the icon around
    – vsync
    Oct 20, 2012 at 1:23
  • If the user has already moved to the right, the user has taken that action and is aware of it, so you don't need to indicate anything as badly. Also, the sentence will read funnily as it will start in the middle of the sentence or word, and that in itself will be a give away that there is more text to the left.
    – Rahul
    Oct 20, 2012 at 18:41
  • I think i always need, because it can be that the person moved to the right and went do stuff for half and hour and came back and forgot. or maybe another person uses the same computer and didn't know the first one moved inside the input...
    – vsync
    Oct 21, 2012 at 0:59
2

I agree with Rahul's suggestion of using an ellipsis. When the input does not have focus, you can replace the last few visible characters with a light gray '...' When the input has focus, the full content of the fields should be accessible without the ellipsis.

In Adobe InDesign, text boxes with additional content have a small + in a box that is placed at the bottom right corner of the text area. (Here's an example I found to illustrate what I'm trying to describe: http://creativecurio.com/wp-content/uploads/2008/07/quark-indesign-text-link.gif) I don't know what you are using to create this form, so this may not be possible depending on how much customization is possible.

1
  • this is what I was a bout to write, Implies some DOM and js, but still would be nice
    – PatomaS
    Oct 20, 2012 at 6:47
1

I saw forms where the last visible characters before the overflow text "vanish" in a transparency gradient. It looks very well, and it's clear what's happening there. I can't remember where ...
I have no idea of how thy did it.
And yes, it is complicated (and somehow anti natural) to overflow at the beginning of the text, you should avoid it by displaying the content in a textarea with enough lines as in your example so the text never scrolls horizontally. This is bad also because the user can't see how much text is there.
Also show all the text on hover, as rahul suggested.

8
  • yes i've thought about that and it seems the BEST way, although a bit tricky to achieve without excessive DOM elements
    – vsync
    Oct 20, 2012 at 2:49
  • there is a button in my example that enlarges the text in a way you see it all
    – vsync
    Oct 20, 2012 at 2:50
  • button: yes, I saw it and it's good thing. But IMO displaying the full text on hover lets the user see it without any action, and without losing the current focus. Notice that your current button is needed in addition to the hover action I'm suggesting, to be used to start the edition action.
    – Juan Lanus
    Oct 21, 2012 at 14:37
  • Given that you like the vanishing text solution, you might want to give a try to an alternative solution I'm thinking of. Simply when there is overflow, set a gradient background image aligned to the right end of the control, spanning about 7 to 10 characters width, with color changing from the background to the foreground. This might result in the same effect in terms of communicating with the user, but not requiring bleeding-edge wizardry.
    – Juan Lanus
    Oct 21, 2012 at 16:12
  • There is also this comment about using a black-to-white gradient background image (he uses a CSS3 gradint, but I think a simple image would work) and setting transparent text over it.
    – Juan Lanus
    Oct 21, 2012 at 16:20
0

Let's think outside the box. Consider showing the ellipsis outside box.

No overflow
no overflow

Overflow to right
overflow right

Overflow to left
enter image description here

0

I 2nd the suggestion for ellipsis, both on the left if the text is scrolled left of the border and on the right if there's text right of the border.

But I'd make the ellipsis both very small (say 50% of the text font) and a different color, maybe light grey (assuming black text on white). You just need the subtlest visual cue to make the point.

0

Just use textarea or expand the textbox to one if there is more than one line of text.

1
  • 1
    it's A solution, BUT sometimes it just won't look good in complex situations
    – vsync
    Oct 21, 2012 at 17:31
0

The form of the input field its self should be indicator enough to show how much text is or will be expected in the field:

  • If your expecting a short input => use a single line text field.
  • If your expecting a larger amount of input => use a multi line text field

Depending on the amount of text use two, three or more lines for the multi line text field. What you also could do is to cut off the last line of that field.

Your Answer

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

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