How to create an auto-expandable scrolling frame?

Hello!

I am trying to make chat logs but I don’t know how would I make a scrolling frame to expand automatically (depends on how many children it has). Basically, I want to make those all GUIs (aka children) to fit in the scrolling frame which auto expands.

What’s the best way to do it?

Thank you!

13 Likes

I add a “DynamicScrollingFrame” tag via CollectionService with the Tag Editor plugin to any scrolling frames that I want to expand automatically depending on the absolute content zize of the first UIGridStyleLayout (UIListLayout, UIGridLayout, etc.) found parented to that scrolling frame. The code (inside StarterPlayer > StarterPlayerScripts) that manages this tag is quite simple:

local CollectionService = game:GetService("CollectionService")

local function registerDynamicScrollingFrame(frame)
	local layout = frame:FindFirstChildWhichIsA("UIGridStyleLayout")
	local absoluteContentSize = layout.AbsoluteContentSize
	frame.CanvasSize = UDim2.new(0, 0, 0, absoluteContentSize.Y)
	layout:GetPropertyChangedSignal("AbsoluteContentSize"):Connect(function()
		local absoluteContentSize = layout.AbsoluteContentSize
		frame.CanvasSize = UDim2.new(0, 0, 0, absoluteContentSize.Y)
	end)
end


CollectionService:GetInstanceAddedSignal("DynamicScrollingFrame"):Connect(registerDynamicScrollingFrame)
for _, frame in ipairs(CollectionService:GetTagged("DynamicScrollingFrame")) do
	registerDynamicScrollingFrame(frame)
end
If you want to parent the LocalScript to the scrolling frame rather than use CollectionService (bad)
local frame = script.Parent
local layout = frame:FindFirstChildWhichIsA("UIGridStyleLayout")
local absoluteContentSize = layout.AbsoluteContentSize
frame.CanvasSize = UDim2.new(0, 0, 0, absoluteContentSize.Y)
layout:GetPropertyChangedSignal("AbsoluteContentSize"):Connect(function()
	local absoluteContentSize = layout.AbsoluteContentSize
	frame.CanvasSize = UDim2.new(0, 0, 0, absoluteContentSize.Y)
end)

Since this code relies on a UIGridStyleLayout, it will not work for you unless you want the scrolling frame to expand based on children ordered by a UIGridStyleLayout. If you don’t currently have any method of ordering the chat logs in a list, you should use a UIListLayout (which is a UIGridStyleLayout) and configure its properties according to your needs.

47 Likes

You can use this for a one time use situation, just place this code into a local script within a UIGridLayout or equivalent:

script.Parent:GetPropertyChangedSignal("AbsoluteContentSize"):Connect(function()
    local absoluteSize = script.Parent.AbsoluteContentSize
    script.Parent.Parent.CanvasSize = UDim2.new(0, absoluteSize.X, 0, absoluteSize.Y)
end)

Edit: This works horizontally too, if you’re using a horizontal scrolling frame.

17 Likes

Sorry to bump this thread, but the answer here (among many others providing a similar solution) doesn’t seem to be working in my situation.

https://gyazo.com/d8875191187a877bf8054ffe8ff3e194

As you can see, the command is supposed to make the ScrollingFrame’s CanvasSize.Y property equal to the UIListLayout.AbsoluteContentSize.Y. The only issue is that UIListLayout.AbsoluteContentSize.Y increases when I run the command, with the CanvasSize.Y never catching up. Am I doing something wrong here?

I can provide more information if necessary. Thanks in advance.

1 Like

That might because the UserEntry’s size on Y must be scale, not Offset. I had a similar problem when I was doing the same thing, I usually keep the size as Offset and add a UISizeConstraint in it to keep it the same size throughout the screen resolutions.

Whenever canvas size expands, the UserEntry’s size will expand too (if it’s size is scale and not offset) which results in AbsoluteContentSize increasing and it just keeps on expanding.

Thanks for the response, however I’ve lost the file I would use to test out the solution so I can’t report back on whether changing it will fix the issue. The only reason I don’t have the file, though, is because I deleted it. Thanks to LayoutUtil, I didn’t have to program any of the ScrollingFrame adjustments manually.