Why is UI messing up?

Help and Feedback Art Design Support
#1

I created a scrolling frame with auto-scaling enabled and added a grid layout to it. When I started to add more items and the scrolling frame got bigger, this started to happen:

image
image

It’s a cause of the aspect ratio. I’ve seen this happen before but didn’t know what to do so I scrapped it. How do I fix this? I don’t want to keep getting rid of all my UI’s cause I don’t know how to fix a problem

1 Like
#2

If your items are getting stretched or the spacing is getting wider, that’s because you are using scale. The scrolling frame is getting bigger thus the spacing and the items scale with it.

A simple fix is to use offset instead. It might mess up your layout when you go on certain devices, but your spacing and size should stay the same all the time.

Now you said the aspect ratio is the cause. Are you using the aspect ratio on the items? If so, keep the size as it is and just make the padding (space between items) offset.

I hope I helped you.

#3

Yes, Im using aspect ratio for each item. Also, how would I make the frames show up the same size on all devices? Thats the whole reason im using scale

#4

I was testing around with a scrolling frame and some items with aspect ratio on, but when the canvas started getting bigger the frames got bigger, though the aspect ratio was making it look like it was still the same shape.

image
image914×496 37.6 KB

This is how it would look before the canvas got bigger.

image
image931×504 45.6 KB

This is how it looked after the canvas started getting bigger.

image
image916×512 48.8 KB

Here are some items without aspect ratio.

Setting the Y size to offset is the only option I can think of, even though it will make the items have different sizes.

Hopefully someone else can fix your problem, but right now I’m stumped.

#5

I found a crude fix for this.

function UpdateGridLayout(UIGridLayout, Canvas)
     UIGridLayout.CellSize = UDim2.new(0,(Canvas.AbsoluteSize.X / 3), 0, (Canvas.AbsoluteSize.X / 3))
end

Just keep the CellSize constantly changing. Fire this function whenever Canvas.AbsoluteSize changes.

1 Like
#6

I found a new solution that works better but basicly the same

-- Too bad the script dosnt look good. I wiped this up in a few minutes after finding out how to do this

local CellSize = script.Parent.Frame.UIGridLayout.CellSize
local AspectRatio = CellSize.X.Offset / CellSize.Y.Offset


script.Parent.Frame:GetPropertyChangedSignal("Size"):Connect(function()
	local Size = script.Parent.Frame.AbsoluteSize
	
	local X = Size.X / 4 -- 4 Being the amount of children
	local Y = X / AspectRatio
	
	script.Parent.Frame.UIGridLayout.CellSize = UDim2.new(0,X,0,Y)
end)

It uses an aspect ratio value instead of aspect ratio, and does the calculations that roblox does to find the sizes

Here’s the place the script is in. Feel free to use it if you want!
UI Messing up Solved (33.9 KB)

1 Like