Solution to Clipping UI?

Hello, I am a very new UI designer who just started designing about 5 days ago. I currently am experimenting with creating a unique leaderboard with scrolling functionality for a game I am working on. My issue lies with parts of the UI being clipped by the ScrollingFrame, particularly the tops and the side of the UI. For this UI in particular I am using a UIGridLayout so I am unable to manually move the segments of the leaderboard. As someone who’s always eager to learn more, I’d love to know how to fix or workaround this issue. Thanks!
image image

Tick ClipDescendants on the ScrollingFrame

1 Like

Ah yes, I should have mentioned this. This does fix the clipping issue for the circles, but it displays all the other names that would normally be hidden and overflows outside of the ScrollingFrame. This results in numerous names being displayed and eventually overflowing offscreen rather than being contained within the ScrollingFrame at the cost of not having the circles clipped.

Here’s an example of what I mean, not sure if I’m using the terminology correctly given how new I am at this.
image

Okay I thought you had ClipDescendants unticked, I thought that was the problem.

Then the Solution would be to make sure the Circles aren’t bigger than the parent frame (not bigger than 1,1)

but that might ruin the effect so you might want to have an invisible frame you call container or something then put the Circle Frame and the Name Frame in it. Making sure both aren’t bigger than (1,1)

1 Like

maybe try adding the UI padding object

3 Likes