Stackview will not obey constraint

Question

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.

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

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.

Answer 1

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:

• 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:

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