iOS Storyboard Constraints Not Operating As Expected

Question

I'm trying to fix these constraints in my storyboard. I currently have a container view that has some constraints and positioning that works perfectly. It resizes based on the screen size and such. It works perfectly.

The view controller that is linked to that container view is currently set to Freeform with a width of 306 and a height of 315. Inside of that view controller I have a scroll view with the following constraints.

So it should take up the entire view controller. Inside of that scroll view I have a lot of elements, buttons, text fields, labels, etc. For example I have a text field pinned to the top of the view (Top Space to Superview 0). I also have trailing and leading space to superview set to 0.

If I change the view controller from Freeform to Fixed I expect the scroll view to change size (which it does), and I expect it to set the width of that text field to be the same width as the scroll view and view (it doesn't). It maintains a width of 306. Even tho it is set to trailing and leading space to superview set to 0.

This creates problems in devices such as the iPhone 4S. I want the elements of this view to shrink in terms of width to fit within that container view. But instead it just allows for horizontal scrolling.

I want to allow vertical scrolling since it is a form and there is a lot of form elements and such. So for smaller devices they should be able to scroll down to view all the elements. But I want the elements to shrink or adjust in terms of width to fit smaller devices.

Any ideas on how to achieve this?

Answer 1

Assuming your layout looks similar to this:

The smaller, light-blue ViewController is has a ScrollView pinned to Zero all the way around.

The Top Left label is pinned at Leading: 0 and Top: 0

The Bottom Right label is pinned at Trailing: 0 and Bottom: 0

All 4 of those constraints are relative to SuperView - meaning the ScrollView.

You also need a Y-position constraint for Bottom Right label - in this case, I have it 435 "vertical spacing" from Top Left label.

At this point, everything works the way you are seeing it now. I have it setup in Storyboard for 7+ ... if I run it on 7+, it fits exactly into the "opening". But... if I run it on 5s, Bottom Right label sits off to the right, and we get horizontal scrolling.

To fix that, you need to add another Trailing constraint to Bottom Right label, but make it relative the the View that is holding the ScrollView.

So, with the Bottom Right label selected, you should see this: