In Xcode I'm trying to add some auto layout constraints to my app, but in the Interface Builder the bottom button keeps pinning to the bottom of the screen. That's technically doing what I told it to do, which is alignment to the safe area. The problem is, the safe area shouldn't be there. I don't know how, why, or when the safe area moved, but I currently have no idea how to move it back. The options in the size inspector are greyed out so I can't change it manually (see picture). What am I doing wrong?
But when running the app simulator, the layouts are correct and the button areas above the little line. in simulator
It looks like you have connected a Present Modally segue.
When designing in Storyboard, Xcode doesn't know the run-time size of the presented controller.
For example, if we have this controller layout (root view background is set to red):
and set that controller to Initial Controller then run the app, we get this (as expected):
However, if we present that controller modally, we get this:
Notice that the bottom looks the same, but the Top doesn't show a portion of the red root view. That's because the presented controller no longer covers the safe-area at the top of the device.
To really see what's going on, we run the app on an iPad and present that controller modally:
Now, neither the Top nor the Bottom will be effected by the safe-area, so we don't see the red root view in either place.
So... in Storyboard, if we add the present segue connection, it looks like what you're seeing:
If we change the Device during Storyboard design to an
iPad Pro 12.9"layout, it looks like this:You may find it easier to complete your layout design in Storyboard before connecting the Present Modally segue.