Quick Tutorial: How to make scrolling frames properly

I am not experiencing this issue in my place.

Would you be able to provide a place file?

I think you should post another thread to fix your question, there are not alot of people here who might fix your issue. I think this can help you:


You might not understand, what i mean is that you can set your ScrollingFrame’s ClipDescendants to false, and put another frame that will have ClipDescendants to true (The red frame and that will be the limit of the friend tiers and set the limit frame in a size in a moment where you can’t see the friend button tier. I hope this helps you :+1:

1 Like

The issue is that the default scroll frame does not scroll all the way to the end of it’s size. Is it a Roblox bug? Look at video below. The scrollbar doesn’t reach the bottom. It leaves a gap of the scrollbar’s width x 2. So a 24 pixel offset from the bottom for the default scrollbar width of 12.

https://streamable.com/8n4fn

Here is a quick example I made, just simply copy / delete the frame to get it to update. The bar not hitting the bottom is a visual bug I believe.
scrollframeexample.rbxl (21.5 KB)

3 Likes

Worth noting that AbsoluteContentSize is a property of constraints like UIListLayout, not a property of ScrollingFrames themselves. I got to this thread by searching for an easy way to scale the canvas size of ScrollingFrames and this confused me!

1 Like

For the past few years i’ve been using a UIAspectRatio constraint parented to a UIGridLayout constraint and using scale on the cells has worked fine for me.

2 Likes

Blockquote “The issue is that the default scroll frame does not scroll all the way to the end of it’s size. Is it a Roblox bug?”

Quick Fix: If you want the Y scrolling bar to go all the way down, just change the Scrolling Direction to Y instead of XY.

Explanation: To respond to Blue101black 's issue: this is not a Roblox bug. The Scrolling Frame’s Bar does not go all the way down because of the default value set to ScrollingDirection inside of the Scrolling Frame’s Scrolling section; when the ScrollingDirection is set to XY there will be a pre-assigned spot for the ‘X’ scrolling bar, however, it does not appear because the default CanvasSize is {0, 0},{2, 0}. As the X values are 0 and 0, there is no reason to have an X scrolling bar because there is no space for anything there (I am not sure if the bar is just too small to see, or when the values are so low it just does not render in.) If you were to create a default Scrolling Frame and just change the CanvasSize to {2, 0},{2, 0} then you will see a space for the X scrolling bar.

3 Likes

Did you assign the variable outside of the function, or connect function

if you did do that, you need to reassign the variable inside the function.

The issue is you’re not taking into consideration the padding between frames. I just encountered this issue, so sure you take this into consideration when using a UIListLayout, UIGridLayout, etc.

CanvasSize = Udim2.new(0, 0, 0, FrameSize * #Frames + (Padding * (#Frames - 1)))

This still doesn’t fix the cutting issue when scrolling down.

It was a Roblox bug, and they have since addressed the issue.

Unsure what’s going on here, might need somebody to dumb it down for me.

I’ve double checked my sizes and changed all the sizes to offset following the 2 steps given

But the canvas still fails increase it’s size when there becomes more children inside the scrolling frame

I’ve put this script into the scrolling frame

local sFrame = script.Parent
local ListLayout = sFrame.UIGridLayout.AbsoluteContentSize

if sFrame.ChildAdded then
	local GenList = function(items)
		sFrame.CanvasSize = UDim2.new(0,ListLayout.X,0,ListLayout.Y)
	end		
end

another question, how would I make the GUI more mobile friendly? I noticed that the GUI has became too large for smaller screens, now that I’m no longer using scale.

1 Like

What is the scale of your UI buttons?

another question, how would I make the GUI more mobile friendly? I noticed that the GUI has became too large for smaller screens, now that I’m no longer using scale.

Use UISizeConstraints and UIAspectRatios.

The buttons are 100x100 using CellSize inside of UIGridLayout

You aren’t updating the list. ChildAdded is function, not a property. Use Layout:GetPropertyChangedSignal(“AbsoluteContentSize”)

1 Like

Changed it up a bit,

local sFrame = script.Parent
local GirdLayout = sFrame.UIGridLayout

GirdLayout:GetPropertyChangedSignal("AbsoluteContentSize")
sFrame.CanvasSize = UDim2.new(0,GirdLayout.AbsoluteContentSize.X,0,GirdLayout.AbsoluteContentSize.Y)

same problem but this time I don’t have a scroll bar anymore, I saw that my canvas size was
(0,100)(1,100) changed the 1 value to 0

This is not how it works. Learn how to use functions and then read documentation on Instance:GetPropertyChangedSignal().

2 Likes

That’s all I needed to know, thanks a ton! everything is working as it should be.

Just a quick note for those who have UIs with a rotation applied:

ClipsDescendants is ignored. People may miss this from the Developer Wiki. If you want to make use of ClipDescendants then you can’t have your UI rotations.

GuiObject.ClipsDescendants (roblox.com)

[23/10/24 Update] Just noticed I got a popular link badge and forgot about this. So, you can do this now, using CanvasGroup. You can rotate the canvas group and keep clipping for rotated child elements. Your Mileage May Vary.