Dashboard responsive columns not working as I expected

This is my custom dashboard code

class UserDashboard extends Dashboard
{

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

}

class UserDashboard extends Dashboard
{

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

}

It seems that the sm breakpoints not working? or you guys have any clue?, The md and xl just working as I expected, and I'm not customizing my chart's columnspan

1 Reply

Zen Nitiruj•6mo ago

You may have to rewrite the widget view:

@php $columns = $this->getColumns(); @endphp <x-filament-widgets::widget class="fi-wi-stats-overview"> <div @if ($pollingInterval = $this->getPollingInterval()) wire:poll.{{ $pollingInterval }} @endif @class([ 'fi-wi-stats-overview-stats-ctn grid gap-6 grid-cols-2', 'md:grid-cols-1' => $columns === 1, 'md:grid-cols-2' => $columns === 2, 'md:grid-cols-3' => $columns === 3, 'md:grid-cols-4' => $columns === 4, 'md:grid-cols-5 xl:grid-cols-5' => $columns === 5, ])> @foreach ($this->getCachedStats() as $stat) {{ $stat }} @endforeach </div> </x-filament-widgets::widget>

Gaming

Programming

Dashboard responsive columns not working as I expected