Issue with CanvasSize and UIGridLayout AbsoluteContentSize

Help and Feedback Scripting Support
, ,
#1

This is more of a question for ROBLOX staff, but if anyone knows of a fix or a reason for why this happens, I am all ears.

I am creating a pretty typical shop UI that utilizes UIGridLayout. Here is my hiearchy:

“Items” is a ScrollingFrame that is populated with ImageButtons of each asset loaded. I am having an issue with some small micro-adjustments in the CanvasSize when the shop is “refreshed.” Here is a gif:

In order to reproduce the bug, I have to switch to the “Accessories” tab (or any other tab), and then switch back to “Hats”. The micro-adjustment occurs when I press “Hats” once more. Once the micro-adjustment is completed, there are no more adjustments upon further clicking/refreshing of that asset type.

Another issue that happens sometimes is an adjustment in the padding. See below

Pay attention to the distance between the rows of assets. My code for updating the CanvasSize is displayed below:

		items:WaitForChild("UIGridLayout"):GetPropertyChangedSignal("AbsoluteContentSize"):Connect(function()
			items.CanvasSize = UDim2.new(0, 0, 0, items:WaitForChild("UIGridLayout").AbsoluteContentSize.Y);
		end)

This is not a huge thing, but it is a bit of buggy behavior that kind of soils the polish. I would really appreciate any insight into why this happens and how I can work around this. I have listed the properties for each UI instance below.

UIGridLayout:

UIAspectRatioConstraint:

UISizeConstraint:

#2

It’s the scrollbar. Your hats tab has more items that can fit on the page, and changing the canvas size beyond the scrolling frame’s size itself brings the scrollbar into play. In contrast, the scrollbar goes away on the accessories tab because all the contents fill the size of the frame without need for scrolling. The microadjustment I’d probably an internal adjustment in relation to that scrollbar coming in and going out. Out of curiosity, what is your scrollbar width?

#3

Before the page actually loads, can you try doing :ApplyLayout() on both UISizeConstraint and UiAspectRatioConstraint?

(Edit: whoops, replied to wrong person)

1 Like
#4

Well, ApplyLayout only applies to UIGridLayout, and it didn’t work. :frowning: Appreciate the help

#5

This was super genius. The scrollbar width was set to 6. I probably just assumed it didn’t have an effect. However, setting it to 0 doesn’t seem to help with the vertical padding adjustments. The tiny micro-adjustments don’t seem to happen anymore, though.

Edit: Nevermind, the adjustments are still happening.

#6

It seems to just like to have random behavior.

#7

May be obvious, but it looks like it’s correcting an offset for some reason. When switching to accessories, the tiles clip the top and left a bit, until it’s corrected. The opposite occurs when switching to hats.

#8

Any ideas here? I think my mind is clouded from exhausting any ideas for potential solutions. The hats and accessories load the exact same way. It’s all the same code. The only difference is that there are more hats than accessories.

#9

I think I could help more if you provided a repro file. I’m not asking for the whole game, just the bits of ui and code that make the menu work.

#10

I’ve concluded that the behavior I’m receiving is a result of the UIGridLayout’s CellSize and CellPadding using scale, and me trying to adjust the CanvasSize based on size that is dependent on CanvasSize. To fix this, I will need to utilize something like pages and use more static sizes.

#11

If it is the Scrollbar like @Kiansjet says, you can use the VerticalScrollBarInset property to make it either Always or Never.

#12

Nope, it turns out that the reason for this behavior is because the UIGridLayout’s CellSize and CellPadding properties are using Scale, so they are dependent on the ScrollingFrame’s CanvasSize. However, the ScrollingFrame’s CanvasSize is dependent on the UIGridLayout’s content size. This means that there are two instances that depend their size on each other. It doesn’t seem to be possible to create an endless scrolling frame without using Offset sizes, but this is inconvenient, as I am trying to make it scale well for all devices. If you have any suggestions I would be glad to hear them.

#13

I went ahead and settled for using Offset instead of Scale. Scale was ultimately causing the micro-adjustments, and Offset is performing as expected. Thank you everyone for your help. Hopefully in the future, Roblox will implement better ways to be able to use UIGridLayouts with scaled Size inside of a ScrollingFrame. For now, Offset is the go to.

1 Like