ScrollingFrame length on different resolutions

Hello there!

I have an issue where I need to solve this:

When I play on a 2K monitor, the ScrollingFrame ends like this:

But when I play on a Full HD monitor, it ends like this:

How can I make the ScrollingFrame have the same length on every screen size and resolution?

1 Like

It looks to be a discrepancy between how you scale the listed items, and how you scale the canvas? In case you are unaware, sizing UI elements are done using UDim2 value types, which are made of 2 UDims that are comprised of Scale and Offset. If the end user’s screen is a different size to yours, the ratio of the ScrollingFrame’s CanvasSize may mismatch how far it actually needs to scroll if the listed elements use offset sizing and the canvas uses scale sizing.

You can think of Scale as a ‘relative’ or ‘ratio’ sizing, where the UI object is scaled relative to its parent object. Offset scaling is absolute, meaning it is measured in exact pixels regardless of the end user’s screen size.

https://create.roblox.com/docs/reference/engine/datatypes/UDim2

A simple fix in this instance may simply be to enable automatic canvas sizing on the ScrollingFrame. I have had some troubles with this in the past though, so if that doesn’t work to your liking then you can manually set the CanvasSize of the ScrollingFrame by adding together the absolute Y size & padding of all the listed elements and using that to set the Y size offset.

https://create.roblox.com/docs/reference/engine/classes/ScrollingFrame#AutomaticCanvasSize

Looks the same to me?

You probably want to set TextScaled to true.

Edit: i found you have clipping issue and in that case you can use setup like this:

local _negative_ScrollbarSize = -12 local ScrollingFrame = Instance.new("ScrollingFrame") do	ScrollingFrame.Active = true	ScrollingFrame.AnchorPoint = Vector2.new(0.5,0.5)	ScrollingFrame.BackgroundColor3 = Color3.new(0.263,0.263,0.263)	ScrollingFrame.BorderColor3 = Color3.new(0,0,0)	ScrollingFrame.BorderSizePixel = 0	ScrollingFrame.Position = UDim2.new(0.5,0,0.5,0)	ScrollingFrame.ScrollBarImageColor3 = Color3.new(0,0,0)	ScrollingFrame.Size = UDim2.new(0.4,0,0.4,0) end local UIListLayout = Instance.new("UIListLayout") do	UIListLayout.SortOrder = Enum.SortOrder.LayoutOrder	UIListLayout.Parent = ScrollingFrame end local function AdjustScale():()	ScrollingFrame.CanvasSize = UDim2.new(0,0,0,UIListLayout.AbsoluteContentSize.Y) end UIListLayout:GetPropertyChangedSignal("AbsoluteContentSize"):Connect(AdjustScale) AdjustScale() for i=1,10 do	local Frame = Instance.new("Frame") do	Frame.BackgroundColor3 = Color3.new(1,1,1)	Frame.BorderColor3 = Color3.new(0,0,0)	Frame.BorderSizePixel = 0	Frame.Size = UDim2.new(1,_negative_ScrollbarSize,0,100)	Frame.Parent = ScrollingFrame	end end