Adding a custom modalWidth

Hello everyone,

I'm trying to add a custom modalWidth to my project, using the customization from Tailwind. According to the Filament documentation, there are only xs to full screen available (see: https://filamentphp.com/docs/4.x/actions/modals#changing-the-modal-width).

7xl (80rem) is too small and full screen is too wide. I'm looking for a max-width of 120rem (1920px).

I added the following:
-

->maxWidth(Width:SevenExtraLarge)

->maxWidth(Width:SevenExtraLarge)

->maxWidth(7xl)

->maxWidth(7xl)

My EditAction:

->recordActions([
                EditAction::make()
                    ->modalWidth('7xl')
])

->recordActions([
                EditAction::make()
                    ->modalWidth('7xl')
])

Both options work perfectly fine. I've tried adding an 8xl option, using the Tailwind documentation (see: https://tailwindcss.com/docs/max-width#customizing-your-theme) but it'll create a full screen modal, which is too large. Is there a way to customize this? If so, how?

Sorry for the formatting, doing this on my phone as I don't have Discord on my work laptop. Thanks for the help!

Modals - Actions - Filament

max-width - Sizing

Utilities for setting the maximum width of an element.

Solution

Nevermind, thanks to a colleague of mine I was able to add this in the theme.css:

.max-w-8xl {
@apply max-w-[120rem];
}

.max-w-8xl {
@apply max-w-[120rem];
}

And this in the Action:

->modalWidth('max-w-8xl')

->modalWidth('max-w-8xl')

Jump to solution

Filament•4mo ago•

3 replies

Xamimum

Adding a custom modalWidth

->maxWidth(Width:SevenExtraLarge)

->maxWidth(Width:SevenExtraLarge)

->maxWidth(7xl)

->maxWidth(7xl)

My EditAction:

->recordActions([
                EditAction::make()
                    ->modalWidth('7xl')
])

->recordActions([
                EditAction::make()
                    ->modalWidth('7xl')
])

Modals - Actions - Filament

max-width - Sizing

Utilities for setting the maximum width of an element.

Solution

Nevermind, thanks to a colleague of mine I was able to add this in the theme.css:

.max-w-8xl {
@apply max-w-[120rem];
}

.max-w-8xl {
@apply max-w-[120rem];
}

And this in the Action:

->modalWidth('max-w-8xl')

->modalWidth('max-w-8xl')

Jump to solution

Adding a custom modalWidth

Adding a custom modalWidth

Similar Threads

Similar Threads

Similar Threads