Filament•3mo ago

The columnSpan on widgets is not working

It seems like the columnSpan property on the Widget class does not have any effect at all unless I'm using full as value. For example 6/12 or 4/12 does not work and displays the widget as 1/12. I have this Dashboard page:

class Dashboard extends \Filament\Pages\Dashboard
{
    public function getWidgets(): array
    {
        return [];
    }

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


    protected function getHeaderWidgets(): array
    {
        return [
            Test::class,
            TestOfWat::class,
        ];
    }
}

class Dashboard extends \Filament\Pages\Dashboard
{
    public function getWidgets(): array
    {
        return [];
    }

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


    protected function getHeaderWidgets(): array
    {
        return [
            Test::class,
            TestOfWat::class,
        ];
    }
}

And this widget:

<?php

namespace App\Filament\Widgets;

use Filament\Widgets\Widget;

class TestOfWat extends Widget
{
    protected static string $view = 'filament.widgets.test-of-wat';

    protected int | string | array $columnSpan = '4/12';
}

<?php

namespace App\Filament\Widgets;

use Filament\Widgets\Widget;

class TestOfWat extends Widget
{
    protected static string $view = 'filament.widgets.test-of-wat';

    protected int | string | array $columnSpan = '4/12';
}

But the width of the widget is always set to 1/12. Unless I set it to 'full'. How should I set it properly? I can't find clear documentation on the website about this.

7 Replies

LeandroFerreira•3mo ago

What about the grid columns that you are using to display widgets? https://filamentphp.com/docs/3.x/panels/dashboard#customizing-the-widgets-grid

Dashboard - Panel Builder - Filament

Baspa•3mo ago

What do you mean? I defined the amount of columns, right?

LeandroFerreira•3mo ago

could you share an image that you are trying to achieve?

Baspa•3mo ago

The ideal situation would be for me to dynamically define the sorting and columnSpan of each widget. But for now, a hardcoded variant would be fine. Let's say I have defined the amount columns of the dashboard page to be 12. I want to be able to show 3 widgets in a row with each a different columnSpan: 1. Widget Foo: 2/12 2. Widget Bar: 6/12 3. Widget Baz: 4/12 See the image for an example of how that would look like. The widgets should be placed in the header, so I created the Dashboard page like this:

class Dashboard extends \Filament\Pages\Dashboard
{
    public function getHeaderWidgetsColumns(): int | array
    {
        return 12;
    }

    protected function getHeaderWidgets(): array
    {
        return [
            Foo::class,
            Bar::class,
            Baz::class,
        ];
    }
}

class Dashboard extends \Filament\Pages\Dashboard
{
    public function getHeaderWidgetsColumns(): int | array
    {
        return 12;
    }

    protected function getHeaderWidgets(): array
    {
        return [
            Foo::class,
            Bar::class,
            Baz::class,
        ];
    }
}

When I define the columnSpan in the Foo widget it does not respect its value but set the columnSpan to 1 (as you can also see in the image, the three widgets all have columnSpan somehow set to 1):

class Foo extends Widget
{
    protected static string $view = 'filament.widgets.foo';

    protected int | string | array $columnSpan = '2/12';
}

class Foo extends Widget
{
    protected static string $view = 'filament.widgets.foo';

    protected int | string | array $columnSpan = '2/12';
}

Baspa•3mo ago

When I set the columnSpan to full it does respect its width. But for the other sizes it somehow does not 🤔

LeandroFerreira•3mo ago

protected int|string|array $columnSpan = 2, actually

Baspa•3mo ago

Ah lol, that worked Thanks!

Gaming

Programming

The columnSpan on widgets is not working