Dynamic Scrolling Frame

Help and Feedback Scripting Support
,
#1

Hi there! I am attempting to create a “Dynamic Scrolling Frame”, or a scrolling frame where its canvas size changes based on the number of UI elements inside of it. I’ve tried several solutions on the developer forums, but the problem I’m having is that the size of the UI elements inside the scrolling frame also changes whenever the canvas size changes. Is there any way to fix this?

2 Likes
#2

I like to use UIAspectRatioConstraint’s to limit the size of the elements. It basically will keep the element from resizing with the changing frame size. I’m assuming your scrolling frame has a UIListLayout, so you can resize the frame when a child is added.

This is an example code assuming the frame only scales in the Y direction:

ScrollingFrame.ChildAdded:Connect(function()
     local ContentSize = ScrollingFrame.UIListLayout.AbsoluteContentSize.Y
     ScrollingFrame.CanvasSize = UDim2.fromOffset(0, ContentSize)
     ScrollingFrame.CanvasPosition = Vector2.new(0, ContentSize)
end)
1 Like
#3

Okay, I tried using a UIAspectRatioConstraint but it seems to shrink this time. Sorry, I don’t really mess around with UI constraints. Can you please explain what settings I should use for it?

#4

UIAspectRatioConstraint will keep a consistent ratio inside of the bounds set by it’s parent’s size. I would set Y to 1, and X to whatever you need. The ratio should be something above 1 so the frame is longer than it is tall. Tinker with the values until the size appears around the same as your current objects.

#5

I’m not sure if this is correct, but I inserted the constraint inside the button. I still can’t figure out how to make the properties just right. When there’s only one UI element, it’s fine, but when there’s a lot, the UI elements appear tiny.

1 Like