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??

Patrick Boivin•6/8/23, 9:09 PM

I think you may need a bit of custom CSS for that

ddoddsrOP•6/9/23, 12:14 PM

Would that be on the page like this?

ddoddsrOP•6/9/23, 12:14 PM

<x-filament::page class="grid grid-flow-col grid-cols-1" >

Patrick Boivin•6/9/23, 12:31 PM

No in a custom CSS file.

Patrick Boivin•6/9/23, 12:32 PM

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:

Patrick Boivin•6/9/23, 12:32 PM

https://filamentphp.com/docs/2.x/admin/appearance#including-frontend-assets

Filament

Appearance - Admin Panel - Filament

The elegant TALL stack admin panel for Laravel artisans.

ddoddsrOP•6/9/23, 1:43 PM

Simple enough to add the file and register it in a provider. What makes it apply to the action button?

Patrick Boivin•6/9/23, 2:34 PM

In a meeting, I'll circle back with a quick example

Patrick Boivin•6/9/23, 3:08 PM

I think would do (

justify-content

justify-content

just to fix the alignment) :

ddoddsrOP•6/9/23, 11:58 PM

I'll give that a try tonight, thanks!

ddoddsrOP•6/10/23, 1:45 PM

must be more to it, My npm run dev is running vite & etc. Still no stacking on desktop size window.

Patrick Boivin•6/10/23, 2:04 PM

Can you try in your browser's CSS inspector? Try adding the rule manually on the element.

Patrick Boivin•6/10/23, 2:05 PM

If that works, then it's probably a simple issue loading your custom CSS file.

ddoddsrOP•6/12/23, 12:25 PM

I added max-width:500px to the div with class filament-page-actions and there was no change

awcodes•6/12/23, 12:40 PM

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.

ddoddsrOP•6/28/23, 2:06 PM

If I remove the shrink-0 It wraps witch works for me.

ddoddsrOP•6/28/23, 2:07 PM

filament-page-actions flex flex-wrap items-center gap-4 justify-start shrink-0

ddoddsrOP•6/28/23, 2:07 PM

Not a css guy so how do I remove that for this page?

Dddoddsr Not a css guy so how do I remove that for this page?

Patrick Boivin•6/28/23, 2:10 PM

You have to customize some of the Blade views which is not ideal. It's easier to add the custom CSS in my opinion.

Dennis Koch•6/28/23, 2:22 PM

You probably need a:

ddoddsrOP•6/28/23, 3:48 PM

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'
],

ddoddsrOP•6/28/23, 3:49 PM

What am I missung? npm run dev is running

awcodes•6/28/23, 3:57 PM

Vite doesn't use the asset() helper. You'll need to use the Vite facade to get the url.

ddoddsrOP•6/28/23, 4:19 PM

so I added @vite(['resources/css/my-styles.css']) to the page under <x-filament::page> and it works in local. thanks

Patrick Boivin•6/30/23, 1:23 PM

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