Filament•2mo ago

widget width "$columnSpan = 'full';" doesn't work with blade-templates

I changed my table widget from filament-widget component to a blade template. Now, the $columnSpan = 'full'; doesn't work anymore and the widget appears in 1 column. How can I expand it to be fullscreen?

Solution:

<x-filament-widgets::widget> <x-filament::section> .... .... </x-filament::section>...

Jump to solution

20 Replies

TheSoulresterOP•2mo ago

MonthlyDrinksWidget....

MikePageDev•2mo ago

Can we see the corasponding blade file please.

TheSoulresterOP•2mo ago

here 🙂

monthly-drinks-widge...

MikePageDev•2mo ago

Is there a reison that you changed from a filament-widget component to a blade template?

TheSoulresterOP•2mo ago

because filament table widgets don't support tabs tabs seems to be only supported in table resources

MikePageDev•2mo ago

Oh, of course. I believe the css for 'column span' is in the widget template. I would personally convert this to a Livewire component, then call it in a custom filament widget and set the column span there. There may be a better way, but I need to look at the source code.

TheSoulresterOP•2mo ago

well... my knowledge is not the best. how will i do that? Its the first time I work with laravel and filament My project would be on github: https://github.com/Feuerwehr-Bamberg-Loschgruppe-1/Strichliste maybe, you can give me some hints? 🙂

GitHub

GitHub - Feuerwehr-Bamberg-Loschgruppe-1/Strichliste

Contribute to Feuerwehr-Bamberg-Loschgruppe-1/Strichliste development by creating an account on GitHub.

MikePageDev•2mo ago

I can have a look latter. It might be easer for me to do a pull request so you can see what I mean. I ahve just thought of a nother option. Creat a custom widget that implements HasTable https://filamentphp.com/docs/3.x/tables/adding-a-table-to-a-livewire-component

Adding a table to a Livewire component - Table Builder - Filament

TheSoulresterOP•2mo ago

would be awesome 🙂 take as many time as u need 🙂

Zen Nitiruj•2mo ago

Have you try to put this function

    public function getColumnSpan(): int | string | array
    {
        return [
            'default' => 1,
            'sm' => 2,
            'md' => 2,
            'lg' => 2
        ];
    }

    public function getColumnSpan(): int | string | array
    {
        return [
            'default' => 1,
            'sm' => 2,
            'md' => 2,
            'lg' => 2
        ];
    }