Filament•7d ago

How to make stat widget vertical

I have 3 widgets (Stats, chart and table) on the same column and I have stats widget that contains 3 stats (as shown in the red rectangular), so I want to make the stats widget vertical (one under the other). How can I do it?

10 Replies

MokatchiOP•7d ago

LeandroFerreira•7d ago

maybe

.fi-wi-stats-overview-stats-ctn {
    @apply grid-cols-1;
}

.fi-wi-stats-overview-stats-ctn {
    @apply grid-cols-1;
}

MokatchiOP•7d ago

I tested it on the navigator and it worked, but I don't know how to apply it on the stats widget code 🥺

Bruno Pereira•7d ago

you have to create a custom theme and add that to the css file. https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme

Themes - Panel Builder - Filament

MokatchiOP•7d ago

is there a way to do it without creating a new theme?

LeandroFerreira•7d ago

what is the issue to add a custom theme?

MokatchiOP•7d ago

I tried one time to add it but it didn't work, so that's why. And isn't it a big thing to add a custom theme to only do one css thing?

LeandroFerreira•7d ago

protected static bool $isLazy = false;

public function mount(): void
{
    FilamentView::registerRenderHook(
        PanelsRenderHook::HEAD_END,
        fn (): string => '<style>.fi-wi-stats-overview-stats-ctn { grid-template-columns: repeat(1, minmax(0, 1fr)) }</style>',
    );
}

protected static bool $isLazy = false;

public function mount(): void
{
    FilamentView::registerRenderHook(
        PanelsRenderHook::HEAD_END,
        fn (): string => '<style>.fi-wi-stats-overview-stats-ctn { grid-template-columns: repeat(1, minmax(0, 1fr)) }</style>',
    );
}

I would create a custom theme instead..

MokatchiOP•7d ago

Okay, I will try to create it and see if it will work this time or not. So can I use it to make the sidebar menu icons bigger?

LeandroFerreira•7d ago

yes

Gaming

Programming

How to make stat widget vertical

Did you find this page helpful?