Different toast alignments for frontend

I have an admin panel, and I am using the Toast notifications in a regular livewire component (https://filamentphp.com/docs/3.x/notifications/installation).

The issue I am having is I cannot find a way of changing the position of the toast notifications only on the frontend.

The code I am using to change it.

Notifications::alignment(Alignment::Center);
Notifications::verticalAlignment(VerticalAlignment::End);

Notifications::alignment(Alignment::Center);
Notifications::verticalAlignment(VerticalAlignment::End);

I have tried the following:

Adding it inside

View::composer('layouts.app', function() {})

View::composer('layouts.app', function() {})

Creating a middleware and applying it to the frontend routes.

Using

request()->is('admin/*')

request()->is('admin/*')

It only happens when trying to send a toast in livewire, does work if I send it then redirect (like a regular flash msg).

Notification::make('foo')
    ->title('bar')
    ->send();

Notification::make('foo')
    ->title('bar')
    ->send();

It's like these attempts cannot tell if the livewire update request is frontend/admin panel so does not work, and Filament is generating the position during this request.

Installation - Notifications - Filament

Solution

Ok have figured it out with:

.fi-no {
    @apply !items-center !flex-col-reverse !justify-end;
}

.fi-no .translate-x-12 {
    @apply -translate-y-12 translate-x-0;
}

.fi-no {
    @apply !items-center !flex-col-reverse !justify-end;
}

.fi-no .translate-x-12 {
    @apply -translate-y-12 translate-x-0;
}

which makes it slide in from the top (and is in the middle) like default

Jump to solution

HHarvey I have an admin panel, and I am using the Toast notifications in a regular livew...

LeandroFerreira•1/3/25, 12:50 PM

You mean, Filament notifications?

LLeandroFerreira You mean, Filament notifications?

HarveyOP•1/3/25, 2:28 PM

yep

HarveyOP•1/3/25, 2:31 PM

I'm using them outside of a panel too though

HHarvey I'm using them outside of a panel too though

LeandroFerreira•1/3/25, 8:14 PM

maybe a custom middleware?

LLeandroFerreira maybe a custom middleware? ```php public function handle(Request $request, Clos...

HarveyOP•1/6/25, 9:46 AM

Tried that. Sadly it does not apply them when I send a notification. Still pops up from the top-right.

HarveyOP•1/6/25, 9:47 AM

Just tried your code verbatim too.

HHarvey Tried that. Sadly it does not apply them when I send a notification. Still pops ...

LeandroFerreira•1/6/25, 9:47 AM

it should work. Maybe you could create a miminal repo on github to reproduce this issue

LLeandroFerreira it should work. Maybe you could create a miminal repo on github to reproduce thi...

HarveyOP•1/6/25, 10:02 AM

https://github.com/harvey-4thd/filament-notification-position here's a repo with the issue reproduced. Fullpage livewire component, with that custom middleware. You can click the button to test the notification.

GitHub

GitHub - harvey-4thd/filament-notification-position

Contribute to harvey-4thd/filament-notification-position development by creating an account on GitHub.

HHarvey https://github.com/harvey-4thd/filament-notification-position here's a repo with...

LeandroFerreira•1/6/25, 5:06 PM

Hi, sorry for the delay. Maybe we can try another way to achieve it:

add to

run

LLeandroFerreira Hi, sorry for the delay. Maybe we can try another way to achieve it: add to `re...

HarveyOP•1/7/25, 8:30 AM

Appreciate your time on this. I have decided to go with checking the and seeing if it has my in there. If it does then we can assume we're on the frontend. That was it'll also retain the correct transition-in.

In my service provider:

Seems to work for my case.

HHarvey Appreciate your time on this. I have decided to go with checking the `request()-...

LeandroFerreira•1/7/25, 8:58 AM

I believe applying the CSS is more appropriate and it avoids additional processing on the backend..

LLeandroFerreira I believe applying the CSS is more appropriate and it avoids additional processi...

HarveyOP•1/7/25, 8:59 AM

Yes, but it does not have the correct transition - it's still coming in from the right

HHarvey Yes, but it does not have the correct transition - it's still coming in from the...

LeandroFerreira•1/7/25, 9:08 AM

same code here

LeandroFerreira•1/7/25, 9:12 AM

you should also install the notifications following this section to add Filament preset, etc

Installation - Notifications - Filament

LLeandroFerreira same code here

HarveyOP•1/7/25, 9:20 AM

But it still slides in from the right? The animation I mean

HarveyOP•1/7/25, 9:20 AM

Is this what you are seeing?

Solution

Harvey•1/7/25, 9:33 AM

Ok have figured it out with:

.fi-no {
    @apply !items-center !flex-col-reverse !justify-end;
}

.fi-no .translate-x-12 {
    @apply -translate-y-12 translate-x-0;
}

.fi-no {
    @apply !items-center !flex-col-reverse !justify-end;
}

.fi-no .translate-x-12 {
    @apply -translate-y-12 translate-x-0;
}

which makes it slide in from the top (and is in the middle) like default

HHarvey Ok have figured it out with: ``` .fi-no { @apply !items-center !flex-col-rev...

LeandroFerreira•1/7/25, 9:45 AM

that works. I think it is better than process it on backend..

LLeandroFerreira that works. I think it is better than process it on backend..

HarveyOP•1/7/25, 10:06 AM

Yeah cheers. I just didn't want to give up those animations