We used it for Minion Simulator and Combo Clickers, works really well.
1 Like
Does this module account for UI elements inside the frame that use Scale as the size (eg a button inside that frame that has its size set to {0.1,0}, {0.1,0}? I want my buttons to size down for mobile and size up for bigger screens, and all of the code I’ve used to try and do this unintentionally makes the UI elements bigger/smaller than intended.
If not, an alternative would be neat because I’ve been stuck on this for a bit now.
For that you should be using UIAspectRatioConstraints, they will automatically resize a GuiObject based off the aspect ratio of your screen. If using it alters the size of the GuiObject, then keep tweaking the AspectRatio property until it seems to align with how it was before.
1 Like
Added GitHub Repository as well as a Wiki.
New features, performance optimizations, and bug fixes described on the Latest Releases.
3 Likes
Thank you I used it for my games, it works 
1 Like
I’m confused on how to use your API for my Scrolling Frame.
When I run the script nothing is happening. Please let me know what I’m doing wrong!
Here is my Setup:
Here is my code:
--// Modules //
local LayoutUtil = require(game.StarterGui.Modules.LayoutUtil)
--// Variables //
local Player = game.Players.LocalPlayer
local UILAYOUT = Player.PlayerGui.ScreenGui.ScrollingFrame.UIGridLayout
Config = {
Bind = false, -- Removes instant binding.
ResizeCanvas = false, -- Removes canvas resizing.
ResizeContent = false, -- Removes content resizing.
OnResize = false, -- Updates when it's resized.
OnWindowResize = false, -- Updates when the content size changes.
-- UIGridLayout Exclusives
CellPadding = UDim2.new(1,1), -- Default CellPadding.
CellSize = UDim2.new(1,1), -- Default CellSize.
-- UIListLayout Exclusives
Padding = UDim.new(), -- Default Padding.
OnAxisChange = false, -- Updates when FillDirection changes.
OnAdd = false, -- Adds object to the resize cache.
OnRemove = false, -- Removes object from the resize cache.
}
--// Script //
LayoutUtil:ConvertToScale(UILAYOUT)
local Class = LayoutUtil.new(UILAYOUT,Config) -- define the path to the UILayout
Class:ResizeCanvas()
Class:ResizeContent()
Class:Bind()
1 Like
The config parameter is just for extra functionality, I should probably make that more clear. If you read up on the example page, all you have to do is require the module and then do .new(UILayout).
local LayoutUtil = require(PATH) -- define the path to the module
LayoutUtil.new(UILAYOUT) -- define the path to the UILayout
Above is all you need to do to get it to work automatically.
1 Like
This is a godsent, i was about to complain about how scrolling frame is a joke in developer discussion
Small bug relating to UIListLayouts was fixed, read more on the latest release.
If anyone has feature requests or problems with bugs, be sure to lmk.
1 Like
How can I use this in combination with UIPadding? The padding is messing up the calculations and making the sizes inaccurate. Any solution?
I believe you can hard-code custom padding using the module.
Not really necessary anymore, I ended up just changed the structure of my UI. Thanks for the suggestion though!
He was talking about an actual UIPadding object I believe, which really shouldn’t affect LayoutUtil. With your statement though, that brings up an idea where I shouldn’t restrict users from having to change the padding directly from my module.
This is simply a game-changer! This has become so essential in UI development. It’s simple to set up and had saved me so much time! Thank you for releasing LayoutUtil!
- eiz_a
Am I doing something wrong here? I’m trying to use this with a UIListLayout, with all items using Scale for size and position. Testing it in the command bar first.
https://gyazo.com/7de64ee85e53bf1241b8aab0e7089fd4
-
X scroll direction being created when I don’t want it to.
-
Resizing the window too much seems to create an issue where the items dont fit the ScrollingFrame, and this change seems irreversible (as seen in the gif).
I can provide more information if you need.
Does this module convert offset values to scale, should i use scale or offset for my elements? I am currently making custom chat and im really stuck i mean literally scrolling frame is just a joke for me and its practically impossible to make responsive design with it
1 Like
I’ve gone out to test it myself and I noticed that a previous fix ended up causing the problems described in your gif. I just released a new version which should fix your issue here. Also don’t forget to use a UIAspectRatioConstraint on top of everything.
2 Likes
The ScrollingFrame should be set to a CanvasSize of (0, 0, 0, 0). With that you should be setting all the children to scale from inside studio, there should be no offset.
1 Like
Appreciate the fix, it works great! This is exactly the behavior I’ve been looking for. I would appreciate one favor though. If you could tell me how I can remove that horizontal scrolling bar, then this would be perfect.
Can’t say I’m sure how this would help. I am a bit of a UI amateur.
1 Like
Think I found a stack overflow bug.
When LayoutUtil is run on a UIListLayout with no sibling frames to apply its listing characteristics to, adding frames will work fine up until the scrollbar has to be created to view them all.
~~Here’s a gif of the module working fine, as it was run on a UIListLayout with 1 sibling frame.
https://gyazo.com/68dc330ed0de4e0e0373d1d4ec44a825~~
~~Here’s a gif of the module breaking because the module was run when the UIListLayout had no sibling frames. You can see the game freeze and become unresponsive as I copy the last frame that would’ve created the scrollbar. The frame never appears in the gif because stack overflow occurred before it could be rendered.
https://gyazo.com/128054e9ecd5ddb3aef0931cc4d1dd64~~
If you need more information or want a copy of the .rbxl to reproduce the bug, I can provide it.
Appears I was using an old version of the module, disregard the above.
1 Like