Filament•5mo ago

Action in panels::sidebar.footer opens modal in sidebar instead of center of screen

Hi all I've added an action to the bottom of the sidebar using the panels::sidebar.footer render hook. It works, but the modal is opening inside the sidebar instead of the in the center of the screen. Any ideas on how I could solve that? Cheers

Solution:

Sounds right, but I'm not completely sure. Maybe mountAction()? I could be wrong.

Jump to solution

14 Replies

binaryfire•5mo ago

Patrick Boivin•5mo ago

@binaryfire Have you tried with some custom CSS?

binaryfire•5mo ago

@Patrick Boivin Yeah tried playing with position and a few other things - no luck. The modal div is nested inside the sidebar so I'm not sure there's a way to break it out. I'm not a CSS ninja though so maybe someone else can figure out a solution.

Patrick Boivin•5mo ago

Ok interesting. I thought maybe position: fixed; but it could be related to the nesting. Would it be an option to place the action in another hook like panels::body.end, and trigger it via a simple button that would be in panels::sidebar.footer?

binaryfire•5mo ago

That's also what Dan suggested in the issue I opened: https://github.com/filamentphp/filament/issues/10771 But don't actions use random ids generated from the Livewire id? Eg. stuff like 3FzKgrV3pk6hv26ePlva-action (https://github.com/filamentphp/filament/blob/b1b1a93fed2d2ba534004c4009dc1f51c71190e1/packages/actions/src/Concerns/InteractsWithActions.php#L449) So I'm not sure how to target an action modal with open-modal when they don't have a fixed id. Any ideas?

Patrick Boivin•5mo ago

Yes the Livewire id is random but I don't think you need it. The simple workaround that comes to mind would be to make the sidebar button click the other button, something like this:

x-on:click="document.querySelector('#my-action-button').click()"

x-on:click="document.querySelector('#my-action-button').click()"

A Livewire event would be possible too, maybe more complicated.

binaryfire•5mo ago

Cool idea. I'll try putting an invisible action in the body and using Alpine to click it. Sounds like that should work. Re: the Livewire event - do you mean adding a custom listener to the action?

Patrick Boivin•5mo ago

Yes, but not on the action itself. It would go on the Livewire component that wraps it.

binaryfire•5mo ago

And then call openActionModal() on the action object on that event?

Solution

Patrick Boivin•5mo ago

Sounds right, but I'm not completely sure. Maybe mountAction()? I could be wrong.

binaryfire•5mo ago

Cool, will have a play with it. Thanks for the help.

binaryfire•5mo ago

@Patrick Boivin Ended up being really simple:

    #[On('open-test-modal')] 
    public function openTestModal(): void
    {
        $this->mountAction('testAction');
    }

    #[On('open-test-modal')] 
    public function openTestModal(): void
    {
        $this->mountAction('testAction');
    }

and dispatch open-test-modal from the sidebar buttons

Patrick Boivin•5mo ago

Very cool! Cleaner than my .click() hack in JS 😆

binaryfire•5mo ago

Still, I liked the hackiness of that idea 😆

Gaming

Programming

Action in panels::sidebar.footer opens modal in sidebar instead of center of screen