My goal is to create a grid of 3 square images per row within a ScrollingFrame using UIGridLayout. (for any screen size)
The image width is sized via the UiGridLayout Cell Size X Scale set to 0.3
The image height is sized via the Image’s UIAspectRatioContraint (AspectRatio = 1, ScaleWithParentSize, Width)
The Canvas Size of the ScrollingFrame should not effect the image size.
The problem is that I get a result shown in screenshot 1 below, where the other rows of images do not show if not fully visible. The result that I would like to get is shown in screenshot 2, in which the other rows of images are displayed, even if the images are only partially visible.
If you disable ClipsDescendants on the ScrollingFrame then force it to update (e.g. cut/paste it), it will render “properly”. You can even re-enable ClipsDescendants and it will work fine until you force the render to update.
More specifically, this seems to be a bug with how Roblox decides if guis should be rendered within a clipping container. If you turn ClipsDescendants off, you’ll still see this behavior with the edges of the window.
I’m also getting weird behavior if I try to make these scroll horizontally – it acts as if the size is 0. I don’t think Roblox is handling the UIAspectRatioConstraint combined with the UIGridLayout properly – both in terms of clipping and size of the ImageLabels for grid purposes.
I think you should make a bug report. You’ve already got a repro. (not repo. a repo is a repository. a repro is a reproduction)
Edit: Until then, you can set the CellSize by script whenever the size changes.
local function keepCellSizeUpdated(scrollingFrame)
local gridLayout = scrollingFrame.UIGridLayout
gridLayout.CellSize = UDim2.new(0, scrollingFrame.AbsoluteSize.x*0.3, 0, scrollingFrame.AbsoluteSize.x*0.3)
scrollingFrame:GetPropertyChangedSignal("AbsoluteSize"):Connect(function()
gridLayout.CellSize = UDim2.new(0, scrollingFrame.AbsoluteSize.x*0.3, 0, scrollingFrame.AbsoluteSize.x*0.3)
end)
end
-- call keepCellSizeUpdated on your ScrollingFrame once
@Tiffblocks will probably have more info, but there are two things going on here, one of which we can fix
Some of the UI occlusion code is not set up correctly, and we will fix.
I’d recommend putting one UIAspectRatioConstraint as a child of UIGridLayout. This will apply that aspect ratio to all the “cells” in the grid. Its a little known about feature we plan on documenting better.
It is worth noting just how weird your UI is. Each of the squares in your layout take up 1 column but around 79 rows. This is because the CellSize in your grid layout has a Y part of 0, and a padding of 3px. Unfortunately, it isn’t immediately intuitive that these are multi-cell objects.
The bug was that the clipping behavior for multi-cell objects was incorrect. It was only considering the bottom right corner of the object, instead of the entire thing. I have a fix for it, but it will not be live until next year.
I was really only trying to get 3 cells per row, independent of the screen size. Each cell needs to be an image with a 1:1 aspect ratio. So whether you were on a computer or phone, you would see 3 image cells per row. The canvas size of the scrolling frame, should not affect the image size. (Which is why I set the Y scaling to 0).
Do you know of a way to achieve the above? If so, it would be great to have a sample file!
Yeah, you can set the X scale to 0.3, and the Y scale to 1, then parent a UIAspectRatioConstraint to the UIGridLayout (rather than each object individually). This will cause the CellSize to be forced into a square, and each of your elements will only take up 1x1 of cells.
I discovered a new bug. Turns out that if you change the aspect ratio (in my case I used a ratio of 1.5), then when viewed on an actual iOS device, large vertical gaps appear between the rows. In the emulator everything looks fine, but on a real device (tested on an iPhone and iPad running the latest iOS), the large gaps appear between rows.
Attached is a repo file, which will allow you to replicate the problem.
Just checking if you were able to replicate the new bug that I discovered on an actual iOS device. In my tests, when I used an aspect ratio of 1.5, then there were large vertical gaps when viewed on a physical iOS device. (The emulator looks fine, so it just occurs on a physical device). In my previous post, I attached a new repo file.
