Scrolling frame fit perfectly based on how many frames are in it using UIListLayout

[aiden9486 (Aiden)]

Hey! I am here wanting to see how I could make a scrolling frame on the X scrolling direction change the CanvasSize based on how many frames are in it, that get sorted using a UIListLayout.

Some solutions I have tried have been Devforum, I found a couple posts about it but I couldn’t seem to figure it out, said something about UIGridLayout but I am not sure what that is or if it is necessary for my situation.

Basically I just am wondering if it’s possible and how, to make it if there are only a couple frames in the scrolling frame, that you cannot scroll at all. But if theres lots of frames in the scrolling frame, that it goes of screen that it makes you scroll only enough to see all of the frames.

[shopkinspizzas (Jim)]

Set the AutomaticCanvasSize propety to X, then set the normal canvas size to {0,0,0,0}, that’s what I always do. Roblox will then automatically calculate the suitable canvas size for you so that it can fit all the objects perfectly. In some cases, you may need to resize your frames.

[aiden9486 (Aiden)]

The issue is that I can’t edit any of the absolute’s, so how do I set it to X?

(This is in the scrolling frame.)

[shopkinspizzas (Jim)]

I think you may have read my message wrong, I mentioned that you need to change AutomaticCanvasSize. In roblox, you are not able to change the absolute values.

[aiden9486 (Aiden)]

Okay, I did what you said, sorry for the misunderstanding. But now when I add more frames that it takes the whole thing up, the scroll wheel isn’t coming back:

[shopkinspizzas (Jim)]

Sometimes it does that, could you show me what’s inside of the objects and their properties?

[aiden9486 (Aiden)]

Yes, here you go. This is what is in all of them.

[shopkinspizzas (Jim)]

Could you also provide their properties? For me it’s working fine

[aiden9486 (Aiden)]

Main Frame:

Play Button:

Star Button:

[aiden9486 (Aiden)]

I also just tested it using a frame, and it works so it must be something with the properties…?

[shopkinspizzas (Jim)]

Sorry for the late response, it could possibly be the UI Aspect ratio constraint. You could try temporarily removing it to see if it works, and also the padding property on the ui list layout could cause problems as well. The automatic canvas size property is just very glitchy as you can see.

[aiden9486 (Aiden)]

Alright. I removed the UI Aspect ratio constraint, and it fixed the issue. But is there a way to keep the constraint and it work? It just makes the UI look a lot better on mobile devices.

This is the difference without it:

[aiden9486 (Aiden)]

Actually wait. I just tested it with a frame, and added a constraint, and it worked. Now I am confused.

[shopkinspizzas (Jim)]

Normally you are able to add a constraint, maybe add it again and mess with the size or remove the frame from the scroller and add it back?

I’m trying to help but it looks like roblox is buggy with these kinds of things.

[aiden9486 (Aiden)]

Hmmmm. I was playing with it a bit, and when I removed the two buttons inside the frame. (Play button and star button) it worked even with the constraint.

[aiden9486 (Aiden)]

Alright, I figured it out with a little script,

local scrollingFrame = script.Parent
local UIListLayout = scrollingFrame.GameTemplates.UIListLayout

scrollingFrame.CanvasSize = UDim2.new(0, UIListLayout.AbsoluteContentSize.X, 0, 0) -- This makes sure the scrolling frame is scaled when the game starts.

local function onContentSizeChanged()
	print("Debug1")
	scrollingFrame.CanvasSize = UDim2.new(0, UIListLayout.AbsoluteContentSize.X, 0, 0) -- This makes sure the scrolling frame is scaled when ever there is something added into it during the game.
end

UIListLayout:GetPropertyChangedSignal("AbsoluteContentSize"):Connect(onContentSizeChanged)

Thanks a lot!