Button created in interface builder... what is this dashed line and how do I fix it?

Question

This is a button created with interface builder:

What is this orange dashed line (button text area, right?), why this is outside the button and how do I make it be inside the button (if this is the case)???

Answer 1

It's because you have auto layout on and that's what it thinks the size and position should be based on the constraints. Sometimes it shows this when the element is moved or resized without adjusting constraints, other times it shows because the constraints given are ambiguous.

Answer 2

Google auto layout. You haven't provided all the required constraints or they aren't the ones you want. The red box indicates where your button would be if it follows the provided constraints.

One possible fix: in interface builder, you see a few buttons on the bottom right. click the third one and then select update constraints.