UITableLayout nested dynamic size issue

Reproduction Steps

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)

3 Likes

Thanks for the report! We’ll follow up when we have an update for you.

2 Likes

This bug is still happening - and it looks like it has been for over a year

2 Likes

Still an issue, where is the fix?