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!

Improve this question
4
  • are these 3 lines separate complete sentences, as opposed to long overflow text?
    – Mike M
    Commented Sep 28, 2017 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
    Commented Sep 28, 2017 at 18:39
  • Is the text editable? Or are you using this control to display read-only text?
    – bfritz
    Commented Sep 28, 2017 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
    Commented Sep 29, 2017 at 12:19

2 Answers 2

Reset to default
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

Improve this answer
1
  • 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
    Commented Sep 29, 2017 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

Improve this answer

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.