Search code examples
xcodestoryboardconstraintsuistackview

Stackview will not obey constraint

I have 4 vertical stacks (NameStack, EmailStack, PasswordStack, ConfirmPasswordStack) and one view (CreateAccountView) embedded in a another vertical stack (FormStack) which inside a view (FormView) but the inner most stacks (NameStack, EmailStack, PasswordStack, ConfirmPasswordStack) will not obey a leading + 20pt constraint and instead stick right to the leaded edge of the FormStack.

Screengrab of display & stacks/views/constraints

When I check on the Conflicting Constraints there seems to be a phantom constraint I can't seem to find/delete (leading=NameStack.leading).

Screengrab of Conflicting Constraints

I have tried adding removing all the constraints multiple times, remove all the other inner stacks and just working with the NameStack and I can NOT get that inner NameStack to be leading + 20pt.

The desired result is below.

Desired result

Solution

  • For starters, it looks like you have your stack views set to Alignment: Center when they should be Alignment: Fill

    A tip: when designing your UI (particularly when learning layout), give your UI elements contrasting background colors to make it easier to see what's going on.

    For example:

    enter image description here

    • Gray: FormView
    • Cyan: FormStack
    • Pink: Name / Email / Password / Confirm stack views
    • Green: Labels
    • Yellow: Text Fields

    When we run that, it will look like this:

    enter image description here

    When we're happy with the layout, we can remove the background colors:

    enter image description here