Container Control on ScrollableArea is wider than original

Targets iOS
1

Why does a Container Control display much wider when on a ScrollableArea versus directly on the Screen?

I have too many fields (vertically) in a narrow Container Control to fit on a small iPhone 8 screen, so I have placed the Container inside a ScrollableArea. I expected the ScrollableArea to only scroll vertically, but the Container displays much wider than its original form causing the user to have to scroll horizontally as well.

Is there a fix for this or am I holding it wrong?

<https://xojo.com/issue/63829>

2

When placed inside a ScrollView, by default they take on their “intrinsic size,” which is to say, the minimum size that the container thinks it needs to encompass all of its contents.

To fix, you need to make a width and height constraint for the container itself.

3

Hmm…

The Container itself has no parameters to set its width.

The ScrollableArea that holds the Container has Auto-Layout parameters for the ScrollableArea itself, but not for the Container. Even the Opening event of the ScrollableArea doesn’t let me to set the width of the Container.

Me.Container.Width = 300 'cannot assign a value to this property

If I force the ScrollableArea to, say, 400 pixels wide, the Container is still too wide, and now scrolls horizontally within a smaller area.

How am I supposed to set the Container width within a ScrollableArea?

4

Fixed by adding Opening Event to the ScrollableArea, thanks to @Martin_T for the answer:

  Var cons As iOSLayoutConstraint 
  
  cons = New iOSLayoutConstraint(Me.Container, _
  iOSLayoutConstraint.AttributeTypes.Width, _ 
  iOSLayoutConstraint.RelationTypes.Equal, _ 
  Me, _ 
  iOSLayoutConstraint.AttributeTypes.Width, _
  1.0, 0)
  
  cons.Active = True
  Me.AddConstraint(cons)

Now it scrolls vertically, but not horizontally!