Filament•3mo ago

css of select field not working anymore

Using filament 3.2 in Laravel 10, the css of the select dropdown is not applied anymore to the item list. No errors in browser console or network tab. Moving back to the commit where it still works does not help me, as it seems nothing related to css was changed there. Here's some extra info:

//Vite config:
import {defineConfig} from 'vite';
import laravel, {refreshPaths} from 'laravel-vite-plugin';

export default defineConfig({
    server: {
        hmr: {
            host: 'localhost',
        },
    },
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/css/filament/admin/theme.css',
                'resources/js/app.js',
                'resources/js/mapbox.js',
            ],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',
            ],
        }),
    ],
});

//Tailwind config:
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';
import preset from './vendor/filament/support/tailwind.config.preset'

/** @type {import('tailwindcss').Config} */
export default {
    presets: [preset],
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './resources/views/filament/user/pages/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],

    theme: {
        extend: {},
    },

    plugins: [forms, typography],
};

//Admin panel provider:

->viteTheme('resources/css/filament/admin/theme.css');

//with theme.css containing:

@import '/vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';

//Vite config:
import {defineConfig} from 'vite';
import laravel, {refreshPaths} from 'laravel-vite-plugin';

export default defineConfig({
    server: {
        hmr: {
            host: 'localhost',
        },
    },
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/css/filament/admin/theme.css',
                'resources/js/app.js',
                'resources/js/mapbox.js',
            ],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',
            ],
        }),
    ],
});

//Tailwind config:
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';
import preset from './vendor/filament/support/tailwind.config.preset'

/** @type {import('tailwindcss').Config} */
export default {
    presets: [preset],
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './resources/views/filament/user/pages/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],

    theme: {
        extend: {},
    },

    plugins: [forms, typography],
};

//Admin panel provider:

->viteTheme('resources/css/filament/admin/theme.css');

//with theme.css containing:

@import '/vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';

Any ideas? Thx.

Solution:

Hi, I found the answer to the 'problem' after noticing on another page that I had a dropdown with the 'correct' and 'incorrect' formatting on the same page. The difference between the two was that one of them had the method '->searchable()' chained to it, which has another, in my opinion nicer, layout for the itemlist than a non searchable select. Sorry, had to obfuscate the text of the items in the screenshot which makes it less clear....