Inconsistent Padding with UI

Help and Feedback Art Design Support
#1

image

fairly normal uigridlayout right? (wrong there is a very small amount of inconsistant padding on the right though from the looks of it too small to matter)

but on different screen sizes it become more noticeable
xbox
image
mobile
image

this only happens while using scale inside padding

image

this happens to me every time I try to create UI Grid Layouts and its insanely annoying

I even saw this issue in a popular game a little while ago (the dungeon quest playerlist I think)

am I doing something incorrectly / is there a fix for this besides not using scale(I need to use scale so it scales lol)?

or is this on roblox’s side and I should report it?

#2

Try using UIAspectRatio constraint, you can use my plugin to help you

1 Like
#3

I am using UiAspectRatio constraint you’re misunderstanding the problem the padding is not consistent for the ui when it should be the problem is not with size

#4

I am not sure what could cause this to happen. I personally never had this problem. Maybe I could have a look at it, see if there is anything I could do?

#5

gui.rbxm (2.9 KB)

I sort of made it work using offset and scale but its still inconsistent on larger screens

#6

Yea, now you made it much better. There is still a bit of inconsistency whatever I do. I think it might be a Roblox issue. :thinking:

1 Like
#7

thanks for messing around and trying to help, ill wait a bit longer and if there is no solution to this from anybody else ill report it

1 Like
#8

I tried out your plugin and it helps significantly because I can do everything in offset to make it look good then convert to scale and keep the good look but it scales

but there is still some slight padding inconsistency

1 Like
#9

Can you screenshot the inconsistency?

#10

exact same ui using scale on different screen sizes

image
image
image

(look at the gaps/padding)

#11

Reviewing your .rbxm file, I don’t know why you used UIAspectRatioConstraint under “ColorFrame” but I’ve removed it.
Your inconsistency was there because you were using {0, 4},{0, 2} as your CellPading instead of {0, 4},{0, 4}. The places were you see inconsistency is because one axis were 2 pixels wider than the other.

Personally, I never use scale under UITableLayout for the CellPading, you’ll get inconsistency through the different resolutions of different devices you try on the UI emulator

1 Like
#12

if you use offset as the padding there is very small space in between frames on big screens and the reverse on small screens

and you misunderstand Im not walking about the difference between the y and x padding its just that all of each padding are not even throughout e,g two rows have the same padding then the third having slightly different padding to the other rows

like you can see in this image the space on the x axis on the two outer rows is bigger than the two inner ones

image

image
image

[User Interface Bug] Padding using Scale Inconsistency
#13

Oh right, I understand now.
Try changing UIAspectRatioConstraint.AspectType to ScaleWithParentSize (under “Back” frame)

EDIT: I’ve removed UIAspectRatioConstraint under your children of ColorFrame and I’m not getting the same issues as what you’re getting.
image
image

#14

Yes you are, the difference may be smaller but its still there

image
image

#15

guiedit.rbxm (2.8 KB)
Try taking this and see for yourself

#16

image

middle gap is bigger than the side ones on emulator

#17

Wow okay, never got these issues with my past experience from what I know.
Add UIAspectRatioConstraint to ColorFrame
Make your ratio to how you wanted it before (think it was 1.75)

#18

I’ve never seen this issue before. For me, adding a “UIAspectRatioConstraint” and setting the ratio to fit within the bounds of my own gui (Scrolling frame) caused the stuff inside the scrolling frame to actually be visible when it wasn’t inside the bounds, and the weird spacing you are talking about.

1 Like