Filament•13mo ago

Add ID to modal

Hi All, I have a action that will open a slideover() modal. Is there anyway to add a ID to the modal? I need to change the padding of modalContent in this modal and some other styling within this modal.

public static function OpenAction()
{
    return Actions\Action::make('notes')
        ->icon('heroicon-m-document-duplicate')
        ->outlined()
        ->slideOver()
        ->modalIcon('heroicon-m-document-duplicate')
        ->modalHeading('All Notes')
        ->modalDescription(fn ($record) => new HtmlString('For company <strong>'.isset($record->company) ? $record->company->companyname : $record->companyname.'</strong>'))
        ->modalIconColor('info')
        ->modalContent(fn ($record) => view('components.notes', [
            'record' => $record,
        ]))
        ->modalSubmitAction(false)
        ->modalCancelAction(false)
        ->modalFooterActions([
            self::CreateAction()
        ])
        ->stickyModalHeader()
        ->stickyModalFooter()
        ->keyBindings(['command+n', 'ctrl+n']);
}

public static function OpenAction()
{
    return Actions\Action::make('notes')
        ->icon('heroicon-m-document-duplicate')
        ->outlined()
        ->slideOver()
        ->modalIcon('heroicon-m-document-duplicate')
        ->modalHeading('All Notes')
        ->modalDescription(fn ($record) => new HtmlString('For company <strong>'.isset($record->company) ? $record->company->companyname : $record->companyname.'</strong>'))
        ->modalIconColor('info')
        ->modalContent(fn ($record) => view('components.notes', [
            'record' => $record,
        ]))
        ->modalSubmitAction(false)
        ->modalCancelAction(false)
        ->modalFooterActions([
            self::CreateAction()
        ])
        ->stickyModalHeader()
        ->stickyModalFooter()
        ->keyBindings(['command+n', 'ctrl+n']);
}

i know there is

extraAttributes

extraAttributes

but this will only apply to the Action button. Or is it possible to open a view where the modal is in? I did not find anything in https://filamentphp.com/docs/3.x/actions/modals Thanks for reading this question.

Modals - Actions - Filament

Solution:

You don’t have to have an id or class to target in css. [wire\:key*="notes.modal"]...

Jump to solution

3 Replies

AliBabba420•13mo ago

inspect while modal is open and search for a unique class name and add style there

TiemeOP•13mo ago

There is no unique class or id specefic to this modal,

<div x-show="isOpen" x-transition.duration.300ms.opacity="" class="fixed inset-0 z-40 min-h-full overflow-y-auto overflow-x-hidden transition flex items-center">

        <div x-ref="modalContainer" class="pointer-events-none relative w-full transition" wire:key="0LVhgf5NdSPrEKhqo7t0.actions.notes.modal" x-on:closed-form-component-action-modal.window="if (($event.detail.id === '0LVhgf5NdSPrEKhqo7t0') &amp;&amp; $wire.mountedActions.length) open()" x-on:modal-closed.stop="const mountedActionShouldOpenModal = true

<div x-show="isOpen" x-transition.duration.300ms.opacity="" class="fixed inset-0 z-40 min-h-full overflow-y-auto overflow-x-hidden transition flex items-center">

        <div x-ref="modalContainer" class="pointer-events-none relative w-full transition" wire:key="0LVhgf5NdSPrEKhqo7t0.actions.notes.modal" x-on:closed-form-component-action-modal.window="if (($event.detail.id === '0LVhgf5NdSPrEKhqo7t0') &amp;&amp; $wire.mountedActions.length) open()" x-on:modal-closed.stop="const mountedActionShouldOpenModal = true

Solution

awcodes•13mo ago

You don’t have to have an id or class to target in css. [wire\:key*="notes.modal"]

Gaming

Programming

Add ID to modal