Dynamically scaling content size in a scrolling frame with a UIGridLayout

Help and Feedback Scripting Support
#1

The Roblox wiki gives an example of using this trick but it doesn’t work well with content that uses Scale instead of Offset. Another benefit of being able to use it with scale, is if the user resizes their window, the content will stay the same size.

If there is a way to use Scale to base size the ScrollingFrame’s canvas while maintaining a static aspect ratio of the content, that would be great. Any help would be appreciated.

3 Likes
#2

Put a UIAspectRatioConstraint into the contents frame.

#3

Do you mind explaining your solution more?

After experimenting around, I can’t find a way to keep the content frames the same size while the CanvasSize is different.

#4

For this I’m just going to assume that your content is parented to a frame (I will be referring to this as frame). Change your ScrollingFrame CanvasSize to (0,0,0,0), then parent the frame to the ScrollingFrame, change the size to whatever you desire, once you have done that you will need to add a UIAspectRatioConstraint to the frame. I recommend using the Autoscale plugin for this as it creates the constraint and sizes it automatically.

1 Like
#5

I know that this has been posted a while ago, but since this type question is widely unanswered, I will answer this question for those who are currently experiencing this problem.

There is no scripting required for this.

After a bit of research, there is actually a property within a scrolling frame labeled as “AutomaticCanvasSize”
image

Depending on the direction you want the canvas to dynamically increase in size, choose one of the following below:
image

In my case, I want my canvas to increase through the Y-axis. After applying these changes, this should be the result:
https://gyazo.com/ba40f275e11ba2f64e124c4ca34f863d

7 Likes
#6

Put a UIAspectRatioConstraint and change the aspectType to “ScaleWithParentSize”. if it still kinda buggy you can try to use UIListLayout instead of UIGridLayout. Also there is a plugin called AutoScale Lite, its free and very usefull

#7 
local layout = chatlogsFrame:FindFirstChildWhichIsA("UIGridStyleLayout")
local absoluteContentSize = layout.AbsoluteContentSize
chatlogsFrame.CanvasSize = UDim2.new(0, 0, 0, absoluteContentSize.Y)
layout:GetPropertyChangedSignal("AbsoluteContentSize"):Connect(function()
	local absoluteContentSize = layout.AbsoluteContentSize
	local LongestXTextBounds = 0
	for i, template in pairs(chatlogsFrame:GetChildren()) do
		if template:IsA("Frame") and template:FindFirstChild("MessageLabel") then
			local textBounds = template.MessageLabel.TextBounds.X
			if textBounds > LongestXTextBounds then
				LongestXTextBounds = textBounds
			end
		end
	end
	chatlogsFrame.CanvasSize = UDim2.new(0, LongestXTextBounds, 0, absoluteContentSize.Y)
end)

Use this to automatically scale the canvas size for your scrolling frame, modify it to your likings. Kinda late reply but i hope still will still help some poeple!

1 Like