Strange UI Padding Issues

[MiningPiggie]

I’ve been experiencing a strange issue with the padding of some GUI I’ve been working with recently.
Basically, the padding of icons in a scrolling-frame weirdly functions incorrectly. Here’s some screenshots to help me explain further:

As you can see, there is the correct amount of space between each icon if I duplicate the icons in studio.

However, upon running the actual game, the icons suddenly have giant gaps between them.

Here’s a picture of the UIGridLayout that basically makes the whole thing work. The padding is clearly set to be the same on both the Y and X axis, yet breaks upon running the game.

I can also confirm this is not a studio visual issue, as this happens upon joining the game as well.
Any help would be much appreciated! I can also provide more screenshots if necessary.

[SeargentAUS (Seargent)]

I suspect it’s because the aspect ratio of holding frame is changing.

Try putting a UIAspectRatio constraint into the frame and see if it helps

[BonesIsUseless (Bones)]

the frames are spreading out because you’re using scale instead of offset padding

the toolbox gets hidden when you run, and the holder frame gets stretched (which makes the grid get spread)

[MiningPiggie]

While this does fix the main issue (the padding functions correctly), adding an AspectRatioConstraint seems to completely disable the AutomaticCanvasSize capabilities of the frame:

The frame is no longer able to decide whether or not to scroll based on how many frames are inside it. (The names are being cutoff here.)

As you also may be able to tell, the frames are all oddly shifted to the left (I can confirm this happens in-game and not just in studio) depending on your screen size.

[MiningPiggie]

It’s been a while now, but I thought I’d add that I did in fact find a solution to this - basically, you just need to make the UIAspectRatioConstraint a child of the UIGridLayout, not the scrolling frame itself.