3

I have a lot of text cells in a lot of tables that use an ellipsis for text overflow and I need a way of revealing the full text.

The way they've currently got it set up is they've made the text look like links and then made clickable popovers, which I'm really not a fan of.

The font can't go any smaller and the cells can't get any wider. But it doesn't really need to work for mobile so I was thinking tooltip hovers might be a decent solution?

Any other suggestions would be great though. Cheers.

2
  • What is the significance of the text? Are people likely to need to copy and paste the full text? How often is the truncated version likely to be enough? Are your users familiar with the system or do they use it rarely? Why are you using a table for this data if it doesn’t fit into a table?
    – Kit Grose
    Jun 4, 2018 at 23:30
  • The text is just various pieces of table data. I doubt the user will require copy/paste functionality. The truncated version should suffice in the majority of cases. Not sure about the users yet. I didn't make the decision to use the tables but they seem to be a reasonable solution considering the type of data and the fact that they are React tables which adds a lot of great functionality. Jun 5, 2018 at 16:21

2 Answers 2

0

First, you should check out this related UX.SE question if you haven't already.

In terms of how to attack this problem in your situation, I have two variations I'd consider (as alternatives to Steve Jones' excellent suggestion of a details pane):

  1. If the field(s) that are being clipped are of secondary importance to the rest of the content (e.g. a long-form description field in an event log table), I've had some success with adding a disclosure triangle on the left of the whole row to allow the user to expand a row and see the details in place. The expanded text is let to span all the columns so it has a lot more space, and can contain any arbitrary formatting, including lists, etc. For example:

    Example of a collapsible table taken from a Stack Overflow question
    Image taken from this Stack Overflow question

    Another example of a collapsible table taken from jQuery EasyUI
    Image taken from jQuery EasyUI

  2. You can add an ellipsis button to the cell that when clicked opens the detail view in a panel. This doesn't sound altogether different from your current approach of links, but links whose text doesn't describe their destination are likely to be confusing, so buttons may feel less awkward. If you choose this approach I agree with you that you should consider adding a tooltip of your truncated content at least in this situation. Microsoft uses this approach a lot in its desktop UIs, often using a custom UI in the overlay dialog:

    Collection editor UI from DevExpress documentation
    Image taken from DevExpress's documentation of its chart control for Windows

    Filter editor UI from DevExpress documentation
    Image taken from DevExpress's documentation of its report & dashboard server

    How Microsoft Visual Studio deals with truncated text using a magnifying glass button
    Image of Microsoft Visual Studio, taken from a .NET Mirror article. Notice the ability for the user to select a particular detail viewer for the given field.

1
  • Some great ideas here, thanks for the feedback Kit. Had I got this a little earlier I think I would have had a crack at the ellipsis link, seems like the most appropriate option for my situation. In the end my employer requested a tooltip approach as the chances of the app being used on tablet in the near future are slim to none. I will certainly bear this in mind though for when we move towards full responsiveness. Thanks! Aug 16, 2018 at 7:23
0

That's a difficult issue to deal with. A few options:

You could do some kind of tooltip, that only appears when you hover over the cell and the text is too big to fit, so uses the ellipsis.

You could allow the rows to be selected (click/touch), then show the details in a panel. Essentially a master-detail pattern, but with the panel below the table (not to the side, as that'd make things worse).

You could allow the rows to be actioned (double-click/double-tap), then show a dialog with the data in, with sufficient space to see all the data. This may be modal, or non-modal, depending on which works best.

Really, it depends what the data is, how crucial the hidden parts are, what works best for the users, what other interactions you have with the table/rows, etc.

1
  • I hadn't come across the master-detail pattern before, interesting. I think in this scenario that would require enough of a redesign to make it unfeasible for my client's deadlines. I'm still leaning most towards the tooltip solution to be honest. Jun 5, 2018 at 16:24

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.