Dynamic text size in list items

[Kazik]

Hello,

I had some family and friends run my app through testflight and one of the testers has larger text enabled on their iphone. This brought up some display issues - especially in lists.

My main issue is that for some of my lists, the rectangle which holds all the list item info does not grow larger when the text inside of it grows so the text ends up extending below the bottom of the rectangle. In other lists it is fine.

Here is an example of a list which it does not work in

And here is an example of a list which it does work in.

I have masonry layout enabled for both lists (I am not sure if this would help with the issue).

Any ideas for this would be greatly appreciated.

Thanks,

Kazik

[Victor]

Hi @Kazik,

These effects (text overflowing container rectangle) is usually caused by the text label overlapping rectangle’s boundaries, or incorrect grouping.

Best,
Victor.

[Kazik]

Hi Victor,

Thanks for your reply. None of the text boxes are overlapping the rectangles boundaries so therefore I guess it is down to the way which I have grouped them.

The only grouping I have is the icon and the text next to it grouped (picture below). I have tried grouping everything as well as the rectangle itself but still same issue.

Is there another way which I should be grouping the items to try to avoid this?

Thanks,

Kazik

[Victor]

Hello @Kazik,

I believe you have some overlapping elements. For example, the $Sessio text label seem to go beyond the right corner.
It is impossible to debug such issues remotely - as I do not have an access to the app, I can not point to all potentially problematic cases. Maybe the text label overlaps the icon somewhere. Maybe the border of one element looks like if it touches the border of another, but in fact they’re overlapping. Maybe the groups are created in a way that a group overlaps another element. Maybe some element jumped into the image occasionally.

The best approach to build such elements is to ensure that your element tree is built like a “nested doll”. E.g. in your case:

• the rectangle will be a parent container, everything is inside it (check on the left pane in a element tree)
• left side (coach or player, image, rating, reviews) could be grouped together. Better to ensure that elements inside the group are not overlapping. Also you could set this group layout to “stay fixed”
• right-middle side - 4 groups, label + icon. Again, no overlap. They should not touch the left group and better not to touch each other vertically.
• price - also inside rectangle, not touching any of the groups.

Best,
Victor.

[Kazik]

Hi Victor,

I put all of the text boxes/images/icons inside of the rectangle and it now works well.

Thank you so much for your help

Have a great day,

Kazik