0

I have the following layout

enter image description here

The relationship between grey label and the red stack view is as follow

  1. Grey label's bottom <= Red stack view's top
  2. Content compression resistance priority for red footer is 1000 vertical. This is to prevent the red footer from being "compressed" by grey label, when the content of grey label grows.

When the label content is not over growth

As you can see, the 1st line of left side grey label, is vertical align with the 1st line of right side grey label.

However,

When the label content is over growth

enter image description here

When the label content grows, the 1st line of the label is no longer vertically aligned properly. Let's me draw a green line to clearly indicate such behavior

enter image description here

Video demonstration

Let me demonstrate with a video, on how a sudden misalignment happen. The misalignment happens at the end of video

enter image description here

Do you have idea why it is such? How I can avoid such issue while retaining overall app behavior?

I posted a minimal workable example at https://github.com/yccheok/first-line-uilabel-not-aligned

Cheok Yan Cheng
  • 47,586
  • 132
  • 466
  • 875
  • That's normal behavior, see https://stackoverflow.com/questions/1054558/vertically-align-text-to-top-within-a-uilabel for illustration. Use maybe a `UITextView`? – Larme Sep 06 '21 at 13:45
  • It's not a misalignment, it's something _you_ are doing. You limit the size to which the label can grow, but you limit it to an amount that is not a multiple of the line height. Therefore there is going to be extra space, and the extra space appears at the top and bottom, because a label's text is always vertically centered. – matt Sep 06 '21 at 15:04

0 Answers0