IBMistake: Things are stacking up.

Patrick Sanders Blog, IBMistake

A common problem we see new iOS Developers make when using Interface Builder is accidentally creating stack views. Stack views are an extremely useful and powerful tool, and Apple even recommends using "stack views wherever possible". However, when you don't need or want one, having one can make your life difficult.

The symptoms:

  • Adding constraints to your view aren't having any effect.
  • Your constraints aren't working the way you expect.
  • Your view is hard to find in the document outline because it's so deeply nested.

You can tell if you've done this by looking in the document tree. You can see the view below is nested in multiple stack views.

stack-button

How it happens:

Accidentally clicking the "Stack" button in the "Auto Layout tools" (the four buttons at the bottom-right corner of the Editor window) is by far the most common way to accidentally create a stack view. Unlike the other buttons in "Auto Layout tools" clicking the 'Stack' button has an immediate effect, which means you can click it accidentally when you're looking for something else.

stack

How to fix it:

There are two simple ways to get rid of an unwanted stack views.

Click the view that's nested inside and drag it out of the stack view. Then click the stack view and delete it.

drag-view-out

Alternatively, you can do the same thing in the document outline. Click the view which has been accidentally caged in a stack view and drag it up to same level in the hierarchy as the stack view. Then delete the stack view.

Document outline drag out