Any ideas how to cause the actions on a custom page to 'stack"
There are have 8 actions on a custom page
which off the right side of the page.
I'd like to put them in a grid on desktop view. Mobile wraps nicely. Is this possible make the desktop view wrap or put in grids??
I'd like to put them in a grid on desktop view. Mobile wraps nicely. Is this possible make the desktop view wrap or put in grids??
17 Replies
I think you may need a bit of custom CSS for that
Would that be on the page like this?
<x-filament::page class="grid grid-flow-col grid-cols-1" >
No in a custom CSS file.
There's a whole section on custom themes in the docs but if you only need to add simple CSS, you can register a single file:
Simple enough to add the file and register it in a provider. What makes it apply to the action button?
In a meeting, I'll circle back with a quick example
I think
max-width would do (justify-content just to fix the alignment) :
I'll give that a try tonight, thanks!
must be more to it, My npm run dev is running vite & etc. Still no stacking on desktop size window.
Can you try in your browser's CSS inspector? Try adding the
max-width rule manually on the .filament-page-actions element.
If that works, then it's probably a simple issue loading your custom CSS file.I added max-width:500px to the div with class filament-page-actions and there was no change
if you are not using a custom theme and only including css assets then you will need to make your css !important, or use a render hook to force the css to be loaded after Filament's style sheet.
If I remove the shrink-0 It wraps witch works for me.
filament-page-actions flex flex-wrap items-center gap-4 justify-start shrink-0
Not a css guy so how do I remove that for this page?
You have to customize some of the Blade views which is not ideal. It's easier to add the custom CSS in my opinion.
You probably need a:
.filament-page-actions { flex-shrink: 1 !important; }my css is not being picked up .
this is in resources/css/my-styles.css .filament-header .filament-page-actions { flex-shrink: 1 !important; } Added this to AppServiceProvider boot method Filament::registerStyles([ asset('css/my-styles.css'), ]); vite config added to input input: [ 'resources/css/app.css', 'resources/css/my-styles.css', 'resources/js/app.js' ], What am I missung? npm run dev is running
this is in resources/css/my-styles.css .filament-header .filament-page-actions { flex-shrink: 1 !important; } Added this to AppServiceProvider boot method Filament::registerStyles([ asset('css/my-styles.css'), ]); vite config added to input input: [ 'resources/css/app.css', 'resources/css/my-styles.css', 'resources/js/app.js' ], What am I missung? npm run dev is running
Vite doesn't use the asset() helper. You'll need to use the Vite facade to get the url.
so I added @vite(['resources/css/my-styles.css']) to the page under <x-filament::page> and it works in local. thanks
Just for the record, Vite is great and all but it's totally possible to include a simple CSS file without the any bundling/processing :
https://filamentphp.com/docs/2.x/admin/appearance#including-frontend-assets