Search code examples
swiftautolayoutconstraintsuistoryboardpageviews

UIStackView clipping and cutting off only on iPhone SE Simulator

I've created an interface when a user first opens the app, an onboarding tutorial screen pops up with some page views. First of all, each page includes an UIImage, and two UILabels. One label consists of a Header & a Subheader. I've tested this for every iPhone (which works perfectly displaying multiple lines with no issue at all including the single line header above the subheader), including the iPhone SE simulator which seems to be the only device that's having issues with the labels when it is a multiline with the UIImage being fine.

I have two stack views, one that contains just the heading and sub heading and another one that's nested inside another stack view that contains the image view, heading and sub heading.

I've tried infinite amount of Stackoverflow solutions based on this issue, including some that involved multiline and as well stack views for fixes but none of them worked or I either had those properties enabled prior.

I do think it has something to do with current constraints but I've tried playing around with them but no luck. The labels would become either bugged more or stay the same way.

Here is an examples from the iPhone SE Simulator

First Page

Second Page

enter image description here

As you can see I am not even able to see the continued subheading text and I cannot even see the heading at all that doesn't even show.

View Objects

View Objects

Stack View Settings - Two Labels

Stack View Settings - Two Labels

Stack View Settings - Two Labels + Image View

enter image description here

Constraints

Contraints

<constraints>
    <constraint firstItem="flc-wn-Ci4" firstAttribute="top" secondItem="h6Y-Dh-vhL" secondAttribute="top" constant="50" id="7nm-Cc-h2H"/>
    <constraint firstItem="h6Y-Dh-vhL" firstAttribute="trailing" secondItem="flc-wn-Ci4" secondAttribute="trailing" constant="24" id="mfT-Ii-Uz5"/>
    <constraint firstItem="h6Y-Dh-vhL" firstAttribute="bottom" relation="greaterThanOrEqual" secondItem="flc-wn-Ci4" secondAttribute="bottom" constant="10" id="ood-l7-Unw"/>
    <constraint firstItem="flc-wn-Ci4" firstAttribute="leading" secondItem="h6Y-Dh-vhL" secondAttribute="leading" constant="24" id="q7k-3q-izI"/>
</constraints>

I even tried making the number of lines to 0 through code

 @IBOutlet var headingLabel: UILabel! {
    didSet {
        headingLabel.numberOfLines = 0
    }
}

@IBOutlet var subHeadingLabel: UILabel! {
    didSet {
        subHeadingLabel.numberOfLines = 0
    }
}

Appreciate if someone has a solution or some sort hack solution as I've ran out of ideas to solve this as posting this question was my last resort.

Solution

  • For this you need to embed the top stackview inside a scrollview, to make the labels expand according to their content.