Header Widgets on Pages not aligned in Grid correctly

[simonjenny]

I want to add twoStat Widgets to the Header of a custom Page

protected function getHeaderWidgets(): array
{
    return [
        AccountUsage::class,
        SendUsage::class
    ];
}

public function getHeaderWidgetsColumns(): int | array
{
    return 2;
}

But instead of aligning side by side they align stacked

I tried everything I found on the web

• Overriding getColumns() in the Widget
• Overriding $columnSpan in the Widget

but no changes.

What am I missing?

[simonjenny]

Alright I think I found it. Sorry but IMHO the Filament Documentations are .. not good.

So to create this:

I had to do a combination of:

1. On the Page

    public function getHeaderWidgetsColumns(): int
    {
        return 12;
    }

2. In every Widget

    protected int | string | array $columnSpan = '6';
    protected function getColumns(): int
    {
        return 6;
    }

I am documenting this here for future Genrations ;)

[badrshs]

This worked for me, I've spent on this issues hours and I wasn't able to fix it, and 100% agree, filament has lots of lack on their doc