DownloadBook a demo

Resolving UIScrollView Scrollable Content Size Ambiguity in iOS Development

Updated 6/6/2024

Dealing with AutoLayout in Interface Builder can be a challenging task, especially when working with UIScrollView. One common issue developers encounter is the “Scrollable Content Size Ambiguity” warning. This article will guide you through the steps to resolve this issue effectively.

Understanding the Problem

When you add a UIScrollView to your view hierarchy and set constraints, you might encounter warnings such as:

  • Scrollable Content Size Ambiguity
  • Misplaced Views

This typically happens because the UIScrollView cannot determine its content size based on the constraints you’ve set.

Solution Using Content Layout Guide and Frame Layout Guide

With the introduction of Content Layout Guide and Frame Layout Guide in later versions of Xcode, resolving this issue has become more straightforward. Follow these steps:

Step-by-Step Guide

  1. Add a UIScrollView to your view and set constraints (e.g., pin it to all sides of the superview).
  2. Inside the UIScrollView, add a UIView (we’ll call this contentView).
  3. Set the contentView‘s constraints: top, bottom, left, and right to the Content Layout Guide of the UIScrollView.
  4. Set the contentView‘s width to be equal to the Frame Layout Guide‘s width.
  5. Set the contentView‘s height to be equal to the Frame Layout Guide‘s height, but with a low priority (e.g., 250) if you need vertical scrolling.
  6. Add all other views inside the contentView and ensure the bottom constraint of the last view is set to the bottom of the contentView.

Example Code

Here’s a snippet to illustrate the setup programmatically:


    private func setupConstraints() {
        // Constraints for scrollView
        scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true

    // Constraints for contentView
    contentView.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor).isActive = true
    contentView.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor).isActive = true
    contentView.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor).isActive = true
    contentView.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor).isActive = true
    contentView.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor).isActive = true


    let heightConstraint = contentView.heightAnchor.constraint(equalTo: scrollView.frameLayoutGuide.heightAnchor)
    heightConstraint.priority = UILayoutPriority(rawValue: 250)
    heightConstraint.isActive = true
}
</code></pre>


Additional Resources


For more information on advanced configurations, check out our advanced configuration documentation. If you’re working with virtual test devices, our virtual test devices documentation might be helpful.


Automating Your Tests with Repeato


As a mobile developer, ensuring your app works flawlessly across various scenarios is crucial. This can be time-consuming, especially when manually testing each change. This is where Repeato comes in.


Repeato is a no-code test automation tool for iOS and Android. It leverages computer vision and AI to create, run, and maintain automated tests quickly. This allows you to focus on developing your app, while non-technical colleagues or QAs can handle the automation tasks.


Learn more about how Repeato can streamline your testing process by visiting our documentation or download page.
EN