Reproduction Steps
- Model to reproduce (place in StarterGui): broken-model-extracted.rbxm (8.6 KB)
- Game where you can reproduce: Gui Bug Test - Roblox
CPU: Intel(R) Core™ i5-10300H CPU @ 2.50GHz
Memory: 16GB
GPU: Intel(R) UHD Graphics
Windows 10 Pro, 21H2, 19044.2006
Dell XPS 15 9500
Expected Behavior
The ImageLabel should expand to fill its parent and the UI should appear green.
Actual Behavior
The ImageLabel remains sized as 0,0px and the UI is red UNTIL you select an object being controlled by the UITableLayout in the explorer. Then it suddenly changes to being green which is the expected behavior, but I believe that it should be happening immediately.
Workaround
Setting FillEmptySpaceRows to false and then true again updates the UI and makes it size properly, but only after the GUI’s parent has been sized:
game.Players.LocalPlayer.PlayerGui.GameGui.Backpack.UITableLayout.FillEmptySpaceRows = false; game.Players.LocalPlayer.PlayerGui.GameGui.Backpack.UITableLayout.FillEmptySpaceRows = true
Workaround component for Roact:
-- A copy of UITableLayout that works around this bug:
-- https://devforum.roblox.com/t/uitablelayout-nested-dynamic-size-issue/2007285
-- The bug: Causes UITableLayout to not properly size dynamically sized cells when FillEmptySpaceRows and FillEmptySpaceColumns are true
-- The workaround: toggles either FillEmptySpaceRows or FillEmptySpaceColumns if either are true whenever the layout size changes (AbsoluteContentSize)
local Roact = require(game.ReplicatedStorage.Roact)
local UITableLayoutWorkaround = Roact.Component:extend("UITableLayoutWorkaround")
function UITableLayoutWorkaround:init()
self.ref = Roact.createRef()
end
function UITableLayoutWorkaround:render()
local props = table.clone(self.props)
props[Roact.Ref] = self.ref
props[Roact.Change.AbsoluteContentSize] = function(change)
self:WorkaroundMagic()
end
return Roact.createElement("UITableLayout", props)
end
function UITableLayoutWorkaround:didMount()
self:WorkaroundMagic() -- In case AbsoluteContentSize was set before didMount was called
end
function UITableLayoutWorkaround:WorkaroundMagic()
local layout = self.ref:getValue()
if not layout then
return
end
if layout.FillEmptySpaceRows then
layout.FillEmptySpaceRows = false
layout.FillEmptySpaceRows = true
elseif layout.FillEmptySpaceColumns then
layout.FillEmptySpaceColumns = false
layout.FillEmptySpaceColumns = true
end
end
return UITableLayoutWorkaround
Issue Area: Engine
Issue Type: Display
Impact: Moderate
Frequency: Constantly
Date First Experienced: 2022-10-04 16:10:00 (-07:00)