i want to fix an issue with the textlabels going off the frame. the frame has automatic sizing to X and same with the textlabels. every property is set to scale too. how do i fix this without code?
ui fix.rbxl (67.4 KB)
Hey there! I think I might know how to fix this. You should use Offset instead of Scale for anything padding/spacing-related inside an AutomaticSize container. AutomaticSize is a pixel-based mechanism, so mixing Scale into it is what breaks it.
- UIListLayout → Padding: change
0.1, 0to something like0, 10(10 pixels of offset). - UIPadding → PaddingLeft: change
0.1, 0to0, 10. - UIPadding → PaddingRight: change
0.1, 0to0, 10.
Each value is {Scale, Offset} — so set the Scale part to 0 and put your amount in the Offset part Lmk if this fixes it, or you need anything!
EDIT:
I tested it in the file you provided, and it worked! Good luck!
3 Likes
i guess there’s a logical explanation why scale does not work as expected here: it’s because frame’s size is set to Auto xy, and since it can’t be calculated (well, because of cyclic dependency on paddings sizes), paddings are zero.
i was hoping to not have to use offset
Can I ask why? It changes nothing that I know of.
cuz on different devices, the padding will look big on small devices
Scale + AutomaticSize can’t coexist on the same axis, that’s why the labels escape the frame. Since Scale is already responsive, just turn AutomaticSize off and size everything (Frame + labels) with Scale, and set TextScaled = true on the labels. That’s the only fully no code option.
so it would only be possible with code? by using offset and using code to automatically adjust the offset?
Nope, no code needed! I think there’s a mix-up about what’s mandatory here, so let me lay it out fully.
Like af_2048 said, the overflow happens because the Frame is on Auto XY, so its size can’t be calculated (the cyclic dependency with the scale paddings), and the paddings collapse. That’s the root cause: Scale and AutomaticSize can’t coexist on the same axis.
But here’s the key thing: AutomaticSize isn’t required for your UI to be responsive. That’s the assumption tripping you up. Scale is already responsive on its own; a size of {0.4, 0} means “40% of the parent on every device, big or small.” AutomaticSize only exists to size things from their content in pixels, and that pixel-based behavior is exactly what’s fighting your Scale values.
So you have three real options, and the middle one is fully no-code and responsive:
- Scale + AutomaticSize → what you have now, breaks/overflows, not actually a working option.
- Pure Scale, AutomaticSize OFF → responsive, zero code. ← This is the one you want.
- Offset + code (or a UIScale) → responsive but needs scripting — only necessary if you want pixel-perfect fixed spacing that still shrinks on small screens.
For the no-code route, do this:
- Frame → set
AutomaticSizetoNone, give it a Scale size like{0.4, 0},{0.12, 0}. - TextLabels → set
AutomaticSizetoNone, give them Scale sizes (e.g.,{0.3, 0},{1, 0}). - TextLabels → turn on
TextScaledso the text shrinks to fit instead of spilling out. - Your existing Scale
UIPadding/UIListLayout.Paddingwill now work, because the Frame has a real size that no longer depends on its children.
That gives you padding that stays proportional on every device, no offset, no scripts. You’d only reach for code if you specifically wanted fixed pixel gaps that also scale down, which doesn’t sound like what you’re after.
i mean’t if i would need to code uipadding paddings and uilistlayout paddings to automatically adjust when screen changes if i had them set to offset
No, you should not need to do that.
so ill just let the padding stay on offset and make it not look good on smaller devices?
There must be some sort of miscommunication, and I appologize for that. Using offset will not make it look bad on mobile.
On computer
Mobile Device Emulator
These two look exactly the same. Automatic size and offset work perfectly together, and do not make it look bad on mobile.
oh nvm, i think you mean’t you used offset for the size. but im trying to make it fit on devices too
Ah I see now, you are emulating to a bigger device.
Hang on, the goat might know how to do this.
Yo @KingAlijahforever, I am sorry for pinging you, but I guess I can not figure this out, and you are pretty good at stuff. Once again I am very sorry for pinging you, but thank you!
1 Like
Ello!! – No worries! Seems simple enough. Give me a few minutes @GameMaster4268
Also thank you @asher_dz . I dont have a problem being pinged when needed :")
2 Likes
Waazup
@GameMaster4268 – One quick way would to honestly turn on the wraps property for the uilistlayout
An to answer your question, no you wouldnt have to hard code it silly :"D
With;
Without
I also used the ui aspect ratio constraint to size it properly to the devices automatically so you dont have to hard code it :")
Monitor default
Emulator
Hope this helps!
Fixed-Ui.rbxl (68.1 KB)
2 Likes