The columnSpan on widgets is not working

It seems like the

columnSpan

columnSpan

property on the Widget class does not have any effect at all unless I'm using

full

full

as value. For example

6/12

6/12

4/12

4/12

does not work and displays the widget as

1/12

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.

BBaspa It seems like the `columnSpan` property on the Widget class does not have any ef...

LeandroFerreira•4/17/24, 11:53 AM

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

BaspaOP•4/17/24, 11:54 AM

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

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

LeandroFerreira•4/17/24, 11:56 AM

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

BaspaOP•4/17/24, 12:01 PM

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:

Widget Foo: 2/12
Widget Bar: 6/12
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:

When I define the

columnSpan

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):

BaspaOP•4/17/24, 12:02 PM

When I set the columnSpan to

full

full

it does respect its width. But for the other sizes it somehow does not

BBaspa When I set the columnSpan to `full` it does respect its width. But for the other...

LeandroFerreira•4/17/24, 12:14 PM

, actually

BaspaOP•4/17/24, 12:15 PM

Ah lol, that worked

BaspaOP•4/17/24, 12:16 PM

Thanks!