How do I make elements in a Scrolling Frame scale to screen size?

Help and Feedback Scripting Support
, , ,
#1

ScrollingFrameScale
ScrollingFrameScale1475Ă—714 707 KB

I have been trying to make a proper scrolling inventory UI for my game and have had much success in getting the canvas to automatically change its size according to the size of the content within it; however, this required me to size those elements using Offset, which I normally never would do. Because of this, whenever I change my screen size, the elements in the scrolling frame do not adjust accordingly.

Does any one know a good way to make them scale without actually scaling them? You can see the issue in the gif above.

Any help would be much appreciated.

1 Like
#2

Use a UIListLayout and size the UI elements using scale. Then on render step (which is what I usually do), set the ScrollingFrame’s canvas size to UDim2.new(0,UIListLayout.AbsoluteContentSize.X,0,UIListLayout.AbsoluteContentSize.Y,0)

#3

I thought the general rule of thumb was to size UI elements inside of a scrolling frame with offset? I can try using scale, but I believe that breaks the auto-scale of the canvas since the elements would constantly be changing size.

#4

Use scale. Offset grabs pixels. Scale grabs the screen’s size and scales it to that.

Example:
If you have an offset of 100 for X, it’s going to be small on a monitor, but big on a phone.

If you use scale. It uses the screens size and “scales” to that.
So 0.1 is 1/10 of the screen size, it will take up 1/10 of the screen on any device.

#5

If I understand your problem correctly, you want the elements to scale with screen size but dont want them to change size when you change the canvas size? (Your gif is actually a png so I can’t see the problem properly)

#6

Yeah I’m not sure why it came out as a png, but yes - I want the list elements to scale properly according to screen size. Of course Scale does this and Offset does not, but everywhere I look is telling me to use Offset inside of ScrollingFrames when the CanvasSize of the ScrollingFrame is already set up to where it automatically rescales to fit the AbsoluteContentSize.

#7

Hi,

I use something like this to scale my scrolling frames, without using Offset

I have a UIGridLayout in the scrolling frame.
The first bit of code here is just adding some dummy labels in, but the bits after that, you run whenever the contents of the frame have changed, either items added or removed.

image

The variables here;

numberOfExtraItems is a count of how many non-visual children the scrolling frame has, here I’ve got two, the UIGridLayour and this script. If you had others (UICorner, or whatever) change this count to include them

numberOfItemsPerRow is, well, how many items you want on a row. Looks like you would set this to 1
rowsPerScreen is how many rows to see at a time, from your screenshot this would be 5

local scrollingFrame = script.Parent

for i = 1, 25 do

local textLabel = Instance.new("TextLabel")

textLabel.Text = "Item " .. tostring(i)

textLabel.Parent = scrollingFrame

end

local numberOfExtraItems = 2

local numberOfItemsPerRow = 3

local rowsPerScreen = 5

local numberOfItems = #scrollingFrame:GetChildren() - numberOfExtraItems

local rows = math.floor((numberOfItems - 1) / numberOfItemsPerRow) + 1

local canvas = rows / (rowsPerScreen * 2)


scrollingFrame.CanvasSize = UDim2.new(0, 0, canvas, 0)

local height = 1 / rows

if height > 1 / rowsPerScreen then

height = 1 / rowsPerScreen

end

scrollingFrame:FindFirstChild("UIGridLayout").CellSize = UDim2.new(1 / numberOfItemsPerRow, 0, height, 0)
1 Like
#8

Yeah while offset might solve that one problem, like you say it presents the new problem of not scaling for different sized screens. What I like to do is give the elements a UIAspectRatioConstraint based on width, that way it will still scale based on the width of the screen and maintain the proper aspect ratio, but as the height of the canvas size is changed the elements wont change in size. (Or the opposite, base it on height if your canvas is being resized horizontally)

This solution only works, of course, if you’re only resizing the canvas on one axis (Only vertically or only horizontally)

1 Like
#9

I tried a solution like this yesterday (my canvas is only resizing vertically), and when I added the UIAspectRatioConstraints to each of my list items, the canvas did not resize properly anymore.