UIButtons at the bottom of UIScrollView not working

Question

I created a UIScrollView in my storyboards and have added 12 UIButtons in a container View which is inside the UIScrollView.

when running on the iPhone 5s simulator, 9 of the buttons can be seen on the screen, the rest of the buttons only can be seen when you scroll down.

the 9 buttons that can be initially seen on the screen can be interacted with. However the 3 buttons at the bottom of the scroll view (which have to be scrolled to in order to be seen) cannot be interacted with.

I ran the app on an iPhone 6 simulator which displays all 12 of the buttons on the screen without having to scroll and the bottom 3 buttons work.

I am using autolayout.

I have tried fiddling with the contentSize of the UIScrollView and it does not help.

Solution 1

It seems you need to increase the frame height of container view. The contentSize of scrollView only affects how it will scroll, which is irrelevant here.

If the button is outside the container view, it will still show up. However, it can't respond to any touch event.

Solution 2

when using scrollview in storyboard with autolayout. it is usually set up using a content view inside the scrollview that will contain all the other views (e.g. buttons, labels, etc.) the content view are usually set to have equal height and equal width.

to make your content view expand it's height, you need to add a height constraint then assign it to an outlet so you could easily manipulate it's value with in your code. then set the content view's height constraint priority to 1000 ("required") and set the content view's "equal width to:view" constraint priority to 750 (high).

Solution 3

For me it was all just to Uncheck the checkbox Adjust Scroll View Insets in the storyboard of that ViewController.

PS: The above answers didn't worked for me.

Solution 4

Another option is to reduce the priority on the Content View.Center Y constraint.

In Xcode 9, I laid out the contentView as needed and the button extended below the view on the iPhone 5. I dynamically resized the scrollView.contentSize.height and contentView.frame in the view controller. The scrollView scrolled for me but I was still unable to select the button and was seeing warnings in the Storyboard.

Once I lowered the priority on the Center Y Alignment Constraint for the contentView, the warnings in Storyboard disappeared and I was able to scroll to the bottom of the scrollView and select the button on the iPhone 5 simulator.

NOTE: I'm still checking the device size and resizing the scrollView.contentSize.height value in viewWillLayoutSubviews() for small devices.

override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        scrollView.contentSize.height = (UIDevice.current.isSmallDevice) ? 560 : contentView.frame.size.height
    }

(UIDevice.current.isSmallDevice is a call to an extension of UIDevice that returns a bool determined by screen size)

View more solutions

Comments

[Wesley Ow]

that worked! thanks, had no idea that the container view height and the contentSize of the scrollView were 2 different things

[ljk321]

@WesleyOw You're welcome. Could you be so kind as to upvote and accept this answer?

[Ioquai]

I do have the same problem. But I don't know exactly which frame height I do have to increase: I have the standard view with the the scroll view, a container view inside it, and the button inside this container view. I increased the height of the scroll view to hold all content (which has a dynamic height) but the increasing of the container view inside doesn't have any effect. It seems like it is even ignored. What do I have to do?

[JohnnyAW]

had the same problem, but wasn't be able to fix it, until I removed contentView to the bottom of my scrollView

[jayant rawat]

how can we do it programmatically?

[mding5692]

unchecking scroll view insets tends to make scrollViews not scroll as noted in another stackoverflow: stackoverflow.com/questions/27554898/…. Happened to me too.

[Ramakrishna]

@skyline75489 Thanks, your answer helped me to solve my issue.

[Alexander]

Same problem here! How do I update the frame height of container view? Is it a child or a parent of scroll view? If I update frame of parent, I get black screen, if I update frame of a child, nothing changes :(

[Philip Borbon]

How many times did you try to end up with this answer? After 2 f***** days. Found this answer. Thanks for this.

[B-Rad]

@PhilipBorbon haha! This was a tough one for sure. Once I was sure it wasn't my code, I took a look at the view hierarchy (developer.apple.com/library/archive/documentation/…) and realized the button wasn't within the scrollView content because the scrollView wasn't sizing properly (although it appeared to be in the simulator!). If I didn't work with some really good devs to point me in the right direction, this would have been 2 days for me, too. As it was, it was still a few hours!