Proper way to scale UI boxes in a ScrollingFrame?

Hey, so I’m trying to figure out the optimal way of scaling a ScrollingFrame I have along with its contents.

I assume I set the CanvasSize of the ScrollingFrame in Offset, because if I don’t do that I feel like there will be a lot of inconsistency; the scroller’s CanvasSize should always remain a constant size based on the number of elements in the frame.

However, since the UI does scale based on screen resolution, I’m trying to figure out how the elements in the ScrollingFrame can remain the same size taking into account the ScrollingFrame’s CanvasSize.

I’m also using a GridLayout to align elements in the ScrollingFrame, to make it easier for me. I’m running into issues where every time I change the size of the CanvasSize, every element also changes in both offset position and size, and this isn’t necessarily desirable…

Any ideas? Thanks. :slight_smile:

3 Likes

Could you try inserting a frame into the scrolling frame and size the frame to 1,0, 1, 0 and then put the ui that are suppose to be in the scrolling frame into the new frame? I remember doing this
(Put the UiGridLayout in the new frame too)

1 Like

That’s actually what I’m currently using, and it still isn’t precise :confused:

Well it works fine for me did you use a auto scale plugin or something like that?
(very likely not)

I can usually make decent scaleable scrolling frames, so, here’s what I do:

I make the size of the scrolling frame with scale, and the contents with UIGrid. The UIs in the scrolling frame are scale for the x axis and offset for the y axis(properties done in the grid layout). This is because the Y axis will be the only axis to be affected. The scale for the x axis is 1/#ofUIsInARow. The UIGrid would also contain a UIAspectRatio so that the y has a relative size to the x, keeping it consistent. You probably get what I’m doing. Any further questions, you can ask.


@C_Sharper here’s a place file:
Test.rbxl (26.5 KB)

Video:

29 Likes

Thanks a bunch! I’ll check this out. :slight_smile: