Storyboard constraints using ScrollView aren't respected

Question

I'm quite new to iOS, specially to complex views using Storyboards. I've started to develop the following screen trying to use AutoLayout so I don't need to worry about different iDevices screen sizes.

I'm using ScrollView to move the content to visible space while need to input some info with the keyboard. The thing is I re-created all the constraints a lot of times trying to make the fields respect the width of the ScrollView. Actually, when running, all the fields are being displayed larger than the ScrollView width (it's like overflowing the screen width to the right). The curious thing is that the button respects its width. When I change the orientation to landscape on iPhone 6s Plus those fields has smaller width than the screen width as if I had defined a specific size and the button continue to respect the size according to it constraints. Any thoughts?

Hierarchy:

View Controller
  View A
    Scroll View
      View B
        Logo / App name / UITextFields / Switch / Button / Link

Basically the Scroll is constrained with View A. View B is constrained by equal width with to View A and to Scroll margins.

Current Xcode version: 7.2 (7C68)

Answer 1

Please find the constraints added to scrollview ie top,left,right,bottom constraints. At the same way set constraints for individual elements inside scrollview ie textfield and button . For these elements , set left,right,top and height constraints. I have added in my code to achieve your functionality see screenshot below.

Answer 2

Scroll view constraint - top,bottom,leading,trailing , View B constraint - top,bottom,leading,trailing and must height-width constraint set , Other element - leading, centrally vertical and must height-width ratio

please try, this will help to solve your issue.

Answer 3

First I would like to thanks Bharath and Dhaval for their answers, they were really helpful.

Although the answers helped me to have a better behavior in this view, it turned out that my problem weren't related to the ScrollView but with a mask I'm applying to those fields and the moment where those mask were applied.

I was applying these mask to get a customized round corner so I had the corners exactly like the post image:

    // Change webservice's text field style
CAShapeLayer *shape = [[CAShapeLayer alloc] initWithLayer:self.url.layer.mask];
UIBezierPath *shadow = [UIBezierPath bezierPathWithRoundedRect:self.url.bounds byRoundingCorners:(UIRectCornerAllCorners) cornerRadii:CGSizeMake(5, 5)];
shape.path = shadow.CGPath;
self.url.layer.mask = shape;

But this mask were applied in viewDidLoad. Changing to viewDidLayoutSubviews solved my problem and I get the right design and behavior in portrait or landscape: round corners where they should be round and respecting the constraints.

Two other sources from stackoverflow I didn't found before and may be useful for people having problem with ScrollView:

• https://stackoverflow.com/questions/31015026/autolayout-and-uiscrollview-storyboard-constraints-are-not-respected
• UIScrollView Scrollable Content Size Ambiguity