Padding inside of ScrollingFrame instances should be easier to work with

Feature Requests Engine Features
#1

As a developer it is currently too difficult to create scalable UI when using ScrollingFrame instances that include padding.

Currently, when using any ‘Padding’ properties in UI layout instances - such as UIListLayout.Padding or UIPadding.Padding... - the Padding.Scale property uses the ScrollingFrame’s AbsoluteCanvasSize property as its reference rather than their AbsoluteSize property. This causes a few annoying problems.

  1. When changing the canvas size of the ScrollingFrame, the elements inside the ScrollingFrame will also shift position if Padding.Scale is used in any UI layout instances. Below is a video of a ScrollingFrame with a UIPadding and UIListLayout inside of it, both using Padding.Scale. When the AbsoluteContentSize of the ScrollingFrame changes, I run code to ‘fit’ the CanvasSize to become equal to the AbsoluteContentSize. But when I start adding more Frames to the ScrollingFrame, the space between the individual elements and the space between the top element and the first element now keeps growing. I am forced to use the Padding.Offset if I want consistent spacing, which is a terrible option when the goal is to create scalable UI that works on all screen sizes.

  1. The ScrollingFrame.AutomaticCanvasSize property should be the solution to perfectly fitting all of a ScrollingFrame’s children, but its implementation seems to mirror the behavior of the point above. When you set the CanvasSize of the ScrollingFrame to the AbsoluteContentSize of the UIListLayout, the CanvasSize property again updates due to Padding.Scale being used. And so the canvas size is never the right size. This defeats the whole purpose of ScrollingFrame.AutomaticCanvasSize.

Current work-arounds

Developers currently have a few silly work-arounds for this problem.

  • Don’t use padding and instead nest the ScrollingFrame’s child elements inside slightly larger Frames which keep some ‘open space’ to mimic the behavior of the Padding property.
  • Use Padding.Offset rather than Padding.Scale and run code to automatically update the Padding.Offset to a smaller or larger number when the user’s screen size changes.

A potential solution

A potential solution to the problems described above is if developers are able to specify if Padding should use a ScrollingFrame’s AbsoluteCanvasSize or AbsoluteSize property. That way, if a developer wants to use Padding.Scale, they can specify to use the ScrollingFrame’s AbsoluteSize instead and so when children are added to the ScrollingFrame, the padding will remain consistent as the AbsoluteSize property remains the same. This would also solve the problem of ScrollingFrame.AutomaticCanvasSize being broken.

13 Likes
#2

you could have a Frame with AutomaticSize on Y and use that as a list inside the ScrollingFrame

image

https://gyazo.com/700c537a07b48afce10facb414478103

4 Likes
#3

Bumping this because I consistently have the same issue and its getting pretty annoying to work around. I do think we really need an option between AbsoluteCanvasSize and AbsoluteSize. There is almost no use cases that I can think of where using AbsoluteCanvasSize is the way to go so it really surprises me that this is the default functionality of Padding elements.