UIScrollView not showing inside UIStackView

Question

I have one UIStackView that stacks vertically two horizontal UIStackViews. That worked just fine. But the first sub-UIStackView had too many elements so I decided to wrap it inside a scrollView. The problem is that when I do so, this first sub-view just disappears, as if the UIScrollView had a height of 0.

Here's the code:

func initViews(){
    let containerStack = UIStackView()
    addSubview(containerStack)
    containerStack.axis = .vertical
    containerStack.distribution = .equalCentering
    containerStack.isLayoutMarginsRelativeArrangement = true
    containerStack.layoutMargins = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
    
    
    let scrollView = UIScrollView()
    let scrolledStack = UIStackView()
    containerStack.addArrangedSubview(scrollView)
    scrollView.addSubview(scrolledStack)
    scrolledStack.distribution = .fill
    scrolledStack.isLayoutMarginsRelativeArrangement = true
    scrolledStack.layoutMargins = UIEdgeInsets(top: 20, left: 30, bottom: 20, right: 30)
    
    scrolledStack.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
    scrolledStack.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
    scrolledStack.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
    scrolledStack.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
    scrolledStack.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true
    
    
    let otherStack = UIStackView()
    containerStack.addArrangedSubview(otherStack)
    otherStack.distribution = .equalCentering
    otherStack.isLayoutMarginsRelativeArrangement = true
    otherStack.layoutMargins = UIEdgeInsets(top: 20, left: 30, bottom: 0, right: 30)
    
    
    containerStack.translatesAutoresizingMaskIntoConstraints = false
    containerStack.topAnchor.constraint(equalTo: topAnchor).isActive = true
    containerStack.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
    containerStack.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
    containerStack.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
    
    
    for number in ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]{
        let text = UITextView()
        text.font = UIFont.boldSystemFont(ofSize: 14)
        text.text = number
        text.isScrollEnabled = false
        text.backgroundColor = .clear
        
        scrolledStack.addArrangedSubview(text)
    }
    for number in ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]{
        let text = UITextView()
        text.font = UIFont.boldSystemFont(ofSize: 14)
        text.text = number
        text.isScrollEnabled = false
        text.backgroundColor = .clear
        
        otherStack.addArrangedSubview(text)
    }
}

otherStack behaves as expected, but scrollView and scrolledStack just don't appear. If I remove the scrollView and just add scrolledStack to containerStack, both stacks appear as expected.

I think you are missing `scrolledStack.translatesAutoresizingMaskIntoConstraints = false` — Fabio Felici, Jun 28 '22 at 14:27
And you might also need to `scrollView.centerXAnchor.constraint(equalTo: scrolledStack.centerXAnchor)` and `scrollView.centerYAnchor.constraint(equalTo: scrolledStack.centerYAnchor)` — Fabio Felici, Jun 28 '22 at 14:31

DonMag · Accepted Answer · 2022-06-28T16:39:41.520

Many UI view elements - such as UIScrollView - have no intrinsic height.

You are putting a scroll view in a vertical stack view, with your stack view set to:

containerStack.distribution = .equalCentering

The problem comes in because the stack view cannot center its arranged subviews if they have no height.

If you change your containerStack to:

containerStack.distribution = .fillEqually

You will see both of the arranged subviews.

If you don't want them to have equal heights, then you need to provide some height value... either with an explicit scrollView.heightAnchor.constraint(equalToConstant: 100.0).isActive = true or perhaps relative to the overall height.

Edit - in response to comment...

Add these lines at the bottom of your initViews() func:

scrolledStack.translatesAutoresizingMaskIntoConstraints = false

scrollView.backgroundColor = .red
scrolledStack.backgroundColor = .lightGray
otherStack.backgroundColor = .systemBlue
containerStack.backgroundColor = .systemGreen

and, instead of .clear, give your first set of text views:

text.backgroundColor = .cyan

and your second set of text views:

text.backgroundColor = .green

Here's how it looks now when I run your code:

That is probably not what you're going for, but by giving your views contrasting background colors, it makes it much easier to see what's going on.

Thanks! With this solution, my scrollView is finally visible, but not its subview scrolledStack or its content — Josemafuen, Jun 28 '22 at 14:55
I had to add `scrolledStack.translatesAutoresizingMaskIntoConstraints = false` does it make sense? — Josemafuen, Jun 28 '22 at 17:15
I also removed `scrolledStack.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true` to allow it to scroll horizontally and added `scrollView.heightAnchor.constraint(equalTo:scrolledStack.heightAnchor).isActive = true` to make it adjust its content height — Josemafuen, Jun 28 '22 at 17:19

score 0 · Answer 2 · answered Jun 28 '22 at 14:48

I readapted a bit your code and created this swift playground:

import UIKit
import PlaygroundSupport

final class ViewController: UIViewController {

  override func viewDidLoad() {
    super.viewDidLoad()

    let containerStack = UIStackView()
    view.addSubview(containerStack)
    containerStack.axis = .vertical
    containerStack.distribution = .equalCentering
    containerStack.translatesAutoresizingMaskIntoConstraints = false

    let scrollView = UIScrollView()
    let scrolledStack = UIStackView()
    scrolledStack.translatesAutoresizingMaskIntoConstraints = false
    containerStack.addArrangedSubview(scrollView)
    scrollView.addSubview(scrolledStack)

    NSLayoutConstraint.activate([
      scrolledStack.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
      scrolledStack.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
      scrolledStack.topAnchor.constraint(equalTo: scrollView.topAnchor),
      scrolledStack.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
      scrolledStack.centerYAnchor.constraint(equalTo: scrollView.centerYAnchor)
    ])

    let otherStack = UIStackView()
    containerStack.addArrangedSubview(otherStack)
    otherStack.distribution = .equalCentering
    otherStack.isLayoutMarginsRelativeArrangement = true
    otherStack.layoutMargins = UIEdgeInsets(top: 20, left: 30, bottom: 0, right: 30)

    NSLayoutConstraint.activate([
      containerStack.topAnchor.constraint(equalTo: view.topAnchor),
      containerStack.bottomAnchor.constraint(equalTo: view.bottomAnchor),
      containerStack.leftAnchor.constraint(equalTo: view.leftAnchor),
      containerStack.rightAnchor.constraint(equalTo: view.rightAnchor),
    ])

    for number in ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]{
      let text = UILabel()
      text.font = UIFont.boldSystemFont(ofSize: 14)
      text.text = number

      scrolledStack.addArrangedSubview(text)
      NSLayoutConstraint.activate([
        text.widthAnchor.constraint(equalToConstant: 100)
      ])
    }
    for number in ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]{
      let text = UILabel()
      text.font = UIFont.boldSystemFont(ofSize: 14)
      text.text = number

      otherStack.addArrangedSubview(text)
    }

  }
}

PlaygroundPage.current.liveView = ViewController()
PlaygroundPage.current.needsIndefiniteExecution = true

UIScrollView not showing inside UIStackView

2 Answers2