Filament•2y ago

Custom breakpoints with $columnSpan property

Does anyone know if it's possible to use custom defined Tailwind breakpoints within the $columnSpan property for Filament dashboard widgets? For example, I have an '3xl' (2000px) custom breakpoint in Tailwind. When I use it in the $columnSpan property, nothing changes in the front-end when I change my screen to 2001px. Thanks in advance 🙂

9 Replies

toeknee•2y ago

Did you see: https://filamentphp.com/docs/2.x/forms/layout#controlling-field-column-span

Filament

Layout - Form Builder - Filament

The elegant TALL stack form builder for Laravel artisans.

RichardOP•2y ago

Thanks, I will look into it when I get home 👍 Hi, no luck so far with this issue. I added a breakpoint in Tailwind like this:

theme: {
        extend: {
            colors: {
                danger: colors.rose,
                primary: colors.blue,
                success: colors.green,
                warning: colors.yellow,
            },
            screens: {
                '3xl': '2000px'
            }
        },
    }

theme: {
        extend: {
            colors: {
                danger: colors.rose,
                primary: colors.blue,
                success: colors.green,
                warning: colors.yellow,
            },
            screens: {
                '3xl': '2000px'
            }
        },
    }

The problem is that nothing changes when I use this breakpoint '3xl' like this:

protected int|string|array $columnSpan = [
        'sm' => 4,
        'xl' => 2,
        '3xl' => 1
    ];

protected int|string|array $columnSpan = [
        'sm' => 4,
        'xl' => 2,
        '3xl' => 1
    ];

Also, when I change for example the 'xl' breakpoint to '2000px' and I use it like in the example above, it works. Does Filament take into account newly added breakpoints that don't come with the standard Tailwind screens-configuration?

Dan Harrin•2y ago

instead of passing an array, pass a string of tailwind classes for all breakpoints at once

RichardOP•2y ago

That solved my problem, thank you! 🙂

Azorky•12mo ago

Hi Richard, how did you manage to solve this?

Azorky•12mo ago

I currently have this. but that doesn't seem to work

RichardOP•12mo ago

Hi, i remember doing exactly that. I don't have my computer close at the moment. In your tailwind config in the content array, do you include the paths to these Filament classes to enable Tailwind to scan the files for CSS-classes? I don't know if Filament has this already configured but i remember i once had problems because of that.

Azorky•12mo ago

Hi Richard, thanks for your reply. I currently have this in my table widget:

protected int | string | array $columnSpan = [
        'default' => 'full',
        '2xl' => 1,
    ];

protected int | string | array $columnSpan = [
        'default' => 'full',
        '2xl' => 1,
    ];

With 2xl it seems to work, but when using 3xl it's not. My Tailwind config looks like this:

RichardOP•12mo ago

Hi, i assume your widget lives under the app/Filament/App namespace? I cant think of any other issue causing the problem. I hope someone else can help maybe 😬

Gaming

Programming

Custom breakpoints with $columnSpan property