Bypassing UIListLayout Filling Invisible Elements?

[Galaxy_Guest (coolboyrich)]

1. What do you want to achieve? Keep it simple and clear!

For my UI, I want to make some frames in a UIListLayout turn invisible, while have other frames visible.

2. What is the issue? Include screenshots / videos if possible!

Whenever I set one of the frames invisible, the UIListLayout automatically fills in that space. I need to find a way for the UIListLayout to ignore that empty space and keep my frames where they are.

An example of what I mean:

What I want my UI to look like:

BEFORE TURNING A FRAME INVISIBLE:

[Frame1, Frame2, Frame3]

AFTER TURNING Frame2 INVISIBLE:

[Frame1, SPACE, Frame3]

What it looks like instead:

BEFORE TURNING A FRAME INVISIBLE:

[Frame1, Frame2, Frame3]

AFTER TURNING Frame2 INVISIBLE:

[Frame1, Frame3]

3. What solutions have you tried so far? Did you look for solutions on the Developer Hub?

One solution is to set every child in a frame to Transparency = 1, but with so many things in the frame, including TextLabels and ImageLabels (which all use BackgroundTransparency, TextTransparency, ImageTransparency, etc.), that would be very rigorous for what I am working on.

Here is a post that explains very well what I am trying to achieve, except I want this to be intentional, and not a bug as mentioned in this post.

UIListLayout uses space even for invisible GUI elements

Up until a week or so ago, I had a UIListLayout with 3 items. [A] [B] [C] When I set A.Visible = false, B and C moved to the left. A recent Roblox update has caused this to stop happening. Now, A is invisible but takes up space regardless. What I see: SPACE [B] [C] What I expect: [B] [C]

Thank you for taking the time to read this.

EDIT: Here’s a visual demonstration of what my problem is.

[phantasmability]

could be you send a picture? kinda hard to imagine it

[L7_M]

Maybe do

for i,v in pairs(frame) do
v.Transparency = 0
end)

[robloxified_pikmin]

Try making the frame invisible without toggling the Frame.Visible boolean

e.g. Frame.BackgroundTransparency = 1
Then make every textlabel and imagelabel inside of that frame invisible by turning off the visibility (TextLabel.Visible = false)

If this doesn’t work, please send images of your problem & the code that handles it.

[VegetationBush (FartedWayTooHard)]

Here are some ideas:

• Use a CanvasGroup and set the GroupTransparency property to 1. This works well with items with a lot of different parts
• Use the Transparency and other related properties to configure whether an item is visible or not. This is optimal for items of a single instance
• Use a parent frame with Visible = true but fully transparent, and put the contents in the parent frame and set Visible = false that way

[Galaxy_Guest (coolboyrich)]

The CanvasGroup solution helped. Thanks a lot, everyone!