2

We are talking about a dialog in a Windows desktop application.

I have text areas that most of the time contain only one line of text, but may occasionally contain several lines. Due to limited space it would be great to display the text areas only one line height and if there's more text then somehow indicate the area should be expanded. (the user can expand the area with a simple resize grabber in the corner)

How to indicate that? I made 3 options: enter image description here

If the ... buttons are clicked the area would grow to show the full content. But which one tells the user that? Do you have any other idea?

Thanks!

  • are these 3 lines separate complete sentences, as opposed to long overflow text? – Mike M Sep 28 '17 at 15:08
  • You shouldn't worry about adding a little extra vertical space to your page/form to fit proper text areas. Users don't mind scrolling: uxmyths.com/post/654047943/myth-people-dont-scroll – bfritz Sep 28 '17 at 18:39
  • Is the text editable? Or are you using this control to display read-only text? – bfritz Sep 28 '17 at 21:03
  • Thanks for the suggestions! - It can be either 3 separate sentences or 1 long sentence wrapped. That's why simply putting ... at the end of the text is not good as the first line can be only 1 word. - This is a dialog in a Windows desktop software, not a webpage, so scrolling is the last resort. - Yes, text is editable. – tamasrell Sep 29 '17 at 12:19
5

The default textarea control already handles this.

When overflow occurs in a textarea control scrollbars appear above the resize handle. However, If you had a single line textarea these scrollbars wouldn't be viable.

Blockquote

As far as UX goes you should always show at least 2-3 lines of a textarea to differentiate it from a standard input box (which doesn't allow Enter/Line breaks).

I would also recommend auto-sizing it bigger on focus if there is any truncated text.

Textarea resize codepen: https://codepen.io/FritzAPI/pen/mwVdow

  • I'll see if I can fit in 2 lines of text and I also like this "auto-sizing it bigger on focus" idea. Thanks! – tamasrell Sep 29 '17 at 12:23
2

Use a gradient overlay and text prompt

This borrows from the now-common 'Continue Reading' buttons seen on news sites and blogs.

In this case, instead of a button, you have a simple text prompt that draws attention to the expand button.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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