0

enter image description here

I have to display all data in a tableView here but other details are not suitable to the size of the device.

As you can see other than "Project Details", those info are readable. But the client to me that "Project Details" may be longer that the device screen (iPhone o iPad || landscape or portrait).

enter image description here

What would be the best approach to display those info, if Project Details' string is longer than the device screen?

Pepeng Hapon
  • 357
  • 1
  • 17
  • I think your question needs to be a bit more elaborative. I don't clearly understand what are the objects in detail part? – manish_kumar Dec 20 '17 at 07:28
  • Hi, I edited my question. – Pepeng Hapon Dec 20 '17 at 07:33
  • Thanks. I gave an answer . Please check and let me know. – manish_kumar Dec 20 '17 at 07:42
  • 2
    If that's ok with your design requirements, you could let the cell height to be dynamic based on what's the text of the project details label. Check this out: https://stackoverflow.com/questions/36574052/swift-dynamic-table-cell-height – Ahmad F Dec 20 '17 at 07:42
  • Hi Ahmad F, can you post it as an answer. I'll make it the correct one, though others give me hint I also owe them one, but this explains all I need. Thanks – Pepeng Hapon Dec 20 '17 at 08:10

4 Answers4

1

I think The best suited solution is to set numberOfLines property of UILabel.

And don't forget to set the height of cell to UITableViewAutomaticDimension to effect the different height of cells.

Jaydeep Vora
  • 6,085
  • 1
  • 22
  • 40
1

Just let be the tableview UI be the same. You just have to work on making the labels multiline to make the whole thing work.

    chatDetailTableView.rowHeight = UITableViewAutomaticDimension
    chatDetailTableView.estimatedRowHeight = 140

After that from storyboard just select the labels in the cell. In the Attributes Inspector section just make the Lines attribute to value 0.

This should work. Pardon me if it doesn't, but please let me know if I can find another work around.

manish_kumar
  • 260
  • 2
  • 12
0

What about breaking the fields so that they are displayed in two or more lines if they are too long?

Or maybe if you know the max length of all those fields you may set a fixed row height so that they always have the space to display all the data.

I think these two possible solutions are way better than, for example, make the rows horizontally scrollable, since they are more understandable for users that don't have to do anything to view all the data.

Sometimes simpler solutions are the best.

Mattia Costamagna
  • 416
  • 6
  • 16
-1

Using a Bootstrap responsible table might be a simple solution for this. It is quite simple and usability proved.

Hidding the overflown info and showing it on a tooltip could work as well but it would depend if they are meant to be clicked or not.

For best UI practices I would not recommend using the label and its value on the same line but rather break it into two. It is both easier to understand/read for the user and it will help you make the horizontal scroll smaller.

Oscar
  • 109
  • 4