LayoutUtil: Automatically sizes a ScrollingFrame's UIGridLayout/UIListLayout

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

  1. X scroll direction being created when I don’t want it to.

  2. 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

Yep, it should all be good on the latest release. Also regarding the UIAspectRatioConstraints, I recommend using this plugin which has a button to automatically create the constraint and set the ratio. Not only that, but it has options to convert the UI to scale or offset (should be scale). I would definitely do some research on the constraints if you aren’t familiar because it’s very important when it comes to UI designing.

2 Likes

Just started using this library in my game and I’m loving how easy it is to setup. The only issue is I’m getting mixed results when it comes to dealing with the ScrollingFrames. In all of my ScrollingFrames I have a UIGridLayout and a UIAspectRatioConstraint parented to it. In my inventory menu, it works correctly, but in my other ScrollingFrames it extends the scrolling out to the right instead of vertical. I can’t imagine why, because scrolling for those frames has always been vertical. Is there something I’m forgetting?

1 Like

Is this necessary anymore now that we have AutomaticSize?

1 Like

My library does two things, it resizes the canvas and it resizes the children. The new automatic size feature I’m hoping to integrate once it’s released, but all that should do is change the canvas size.

Now let’s say you have a UIGridLayout and the CellSize is in offset. As shown in the first gif without LayoutUtil, you could see how it only shows 1 column of UI elements once the resolution was lowered. Let’s say you have the CellSize in scale, every time the canvas resizes it will stretch out the children. Which is all undesired behavior that is solved with my library.

LayoutUtil also has the added benefit of calculating the CellPadding/Padding and resizing the children of a UIListLayout/UIGridLayout.

1 Like

Hmm, in the latest update I fixed a small bug which extended the ScrollingFrame horizontally even though it was vertical. Are you sure the ScrollingDirection of the ScrollingFrame isn’t mistakenly set to only the X axis? If this issue still persists, hmu in my dms and we can get it sorted.

1 Like

Whenever I try to use it, the Scrolling Frame just glitches rapidly. And the canvassize is like -294382923-

1 Like

Are you sure you avoided the bad mistakes provided in the documentation.

1 Like

I cannot make a custom chat with this, I need to scale the text label thing depending on the size of text but weird things happen can someone help me? I mean the calculate text size thing outputs the size as offset which is not responsive and you said we need to use scale for the elements(i mean if its scale it automatically sizes everything anyway so whats the point of this module)

1 Like

well in the second paragraph if i understand it correctly cant we do the same thing to every gui instance like put the module on replicated first require it and it will handle everything every gui instance make everything responsive so it scales well into mobile and pc’s without anything else just one line

1 Like

Would’ve saved me a lot of time organizing UIGridLayout’s and such, thanks for the amazing release!

1 Like

I’m not exactly sure what you’re asking me. But as described in the gifs provided, you could see the effect of using my module and not using it. Now in the comparison gif I showed a game that used offset for the CellSize. Rather if they used Scale it would end up stretching each element and making it look ten times worse. Fortunately my library solves both of those problems, but when you first create the ScrollingFrame and UIGridLayout it’s required to be done in scale. Also unless if it’s happening on immediate start of opening the game, you should be storing this in a place other then ReplicatedFirst (preferably somewhere only accessible by the client).

I am aware that you can’t change the size of an element inside of a ScrollingFrame while LayoutUtil is active, this is a feature that I’m hoping to include in the next update.

1 Like

I found a bug. If there is a UIPadding within the scrolling frame and there are a lot of children, it creates huge space at the top

A lot of children:
image

Fewer children:
image

EDIT: It also makes it so you can’t see the bottom row properly
image

1 Like