How to make instances fit perfectly in scrolling frame?

I’m trying to make it so instances in a scrolling frame using a UI list layout will all fit perfectly, however I come across a problem where things like this often happen:

Ex1: we can see that the border of the frame is outside of the scrolling frame.
image

Ex2: we can see here that the ‘[’ and ‘]’ are not fit inside of the frame perfectly.
image

I use scale for everything because using offset seems to glitch it out on other devices etc. I am not so great at doing UI scaling and calculations, does anybody know a good fix to this and what I can do in the future to prevent this issue?

A non-hacky way of doing that would be parenting the scrolling frame to a slightly bigger frame, disable clip descendants from the scrolling frame and enable it at the parent frame. Probably a scale of 0.9 or 0.95 is enough to prevent undesired clipping.

Another way that doesn’t require scripting would be letting two small invisible frames at the top and at the bottom of the scrolling frame.

2 Likes

Set the canvas size to UDim2.new(0, 0, 0, 0), automatic size to ‘X’, ‘Y’, or ‘XY’ depending on the dominant axis (if there is one), you’ll also need a UILayout instance inside the scrolling frame, make sure this (the UILayout instance) is sized according to offset as opposed to scale.

4 Likes

i like the bottom idea, i might try it if forummer’s solution doesn’t work.

the canvas uses AutomaticalCanvasSize to increase as items are added to it. how do you set the proper offset by the way?

You’d use GuiObjects as padding, a frame would suffice, with its transparency property set to 1.

alright. Thank you. this seems to be a decent solution to the problem.