Issues Creating A Grid Using Scaling

My goal is to create a grid of 3 square images per row within a ScrollingFrame using UIGridLayout. (for any screen size)

  1. The image width is sized via the UiGridLayout Cell Size X Scale set to 0.3
  2. The image height is sized via the Image’s UIAspectRatioContraint (AspectRatio = 1, ScaleWithParentSize, Width)
  3. 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.

Screenshot 1:

Screenshot 2:

Repo File
Grid.rbxl (16.3 KB)

3 Likes

This seems to be a bug with ClipsDescendants.

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
1 Like

Thanks Corecil! I have moved this into the Bug Reports forum.

1 Like

I’ll look into this.

1 Like

Hi Tiff! Any progress in getting this fixed? It is really quite necessary in order to be able to create responsive grids for various screen sizes.

@Tiffblocks will probably have more info, but there are two things going on here, one of which we can fix

  1. Some of the UI occlusion code is not set up correctly, and we will fix.
  2. 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.
6 Likes

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.

3 Likes

Thank you! This works perfectly.

Thanks for that tip. I did not know this was possible, but it works great!

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.

Grid2.rbxl (16.4 KB)

Hi Tiffblocks!

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.

and fyi for anyone reading this thread, we turned on a fix today that solved the issues being discussed in this thread.

Unfortunately, it looks like that this bug has been reintroduced.

  • On a physical iPad this is bugged. The grid is displayed wrong for any aspect ratio. I tested on an iPad Mini.
  • On a physical iPhone this is partially bugged. It works when the aspect ratio is set to 1, but not for other aspect ratios. I tested on an iPhone 6.

So there must be something with the code related to iOS causing this bug.

(repro: grid2 linked above in earlier post)

Edited: updated bug description

I just enabled a fix for the first bug - the original Grid.rbxl.