I am creating an app which has functionality to search in some specific database and result it back in grid format. Sometime resulted data words are so long that it is not cover in column and it split on multiple rows. Due to data is critical(showing chemical names etc..) and need to visible in column, we don't want to

I am app developer not a designer so not understanding how to manage such data design. Kindly suggest good design.. Thanks in advance!

Current design - sorry can't upload actual screenshot :(

enter image description here

  • Welcome to UX StackExchange. Your sketch is quite clear for the purposes of this question!
    – tohster
    May 24, 2015 at 0:33

2 Answers 2


Here are some options

Mobile devices present some challenges for tables. For long text, your choices are basically to truncate or to wrap the text. You could also shrink the text, but this presents some more issues (inconsistent font, not a great solution when length of text is uncertain).

Generally you can present the text wrapped in a column, the provide users with an alternative to zoom in to see the text more clearly in a wide-screen format:

use magnifying glass or 'more' icon in the cell, and then clicking on the icon brings up a modal dialog or panel to show the text fully


Well, you need to realize that if you're using tables, space will be limited. You could automatically extend your column, but then you'll have horizontal scrolling, which may cause way more issues than truncating your words.

So, for your particular problem, you have these options:

  • if you want to keep tables, then truncate your words using an element that suggests continuity (the usual element is an ellipsis, but personally, I'd use a small arrow or + sign). This way, you could have something like this:

  • however, a better method could be using cards. This way, you can have more horizontal space and you can layout the information in many different ways, including visual aids, different formatting, maybe images (if needed) and so on, not to mention it works way better for mobile devices

In the end, you'll need to consider whether you REALLY need this names not to be cut, whether you want users to quickly scan your content, and what's the most appropriate method to display your information

  • Thanks Devin! it seems card would be better option for my case, as you can see in my sketch we have horizontal row button on left side which pivot the table, but I can't place sorting option on column with current design. Also I am showing showing data in header: data format, in each row header repeating again and again, is there any solution on it? or it is fine UX? May 24, 2015 at 10:23
  • I don't understand the second part of your question, but for the first part, yes, you can sort the columns, try something like listjs.com that has options to sort both tables and cards
    – Devin
    May 24, 2015 at 20:15

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.