© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
FilamentF
Filament•4mo ago•
13 replies
jamesro

How can i override fi-dropdown-panel css

Hello,

I have a case where tenant names are kinda long and doesn't look nice in tenant dropdown select menu

i tried to put in my custom theme.css

& .fi-dropdown-panel {
    @apply absolute z-20 w-screen max-w-[18rem]! rounded-lg bg-white shadow-lg ring-1 ring-gray-950/5 transition dark:bg-gray-900 dark:ring-white/10;
}
& .fi-dropdown-panel {
    @apply absolute z-20 w-screen max-w-[18rem]! rounded-lg bg-white shadow-lg ring-1 ring-gray-950/5 transition dark:bg-gray-900 dark:ring-white/10;
}

But seems its not overriding, any idea?
Solution
this works

@layer components {
    .fi-tenant-menu .fi-dropdown-panel {
        max-width: 18rem !important;
    }

    .fi-dropdown-panel .fi-dropdown-list-item-label {
        font-size: 10px;
    }
}
@layer components {
    .fi-tenant-menu .fi-dropdown-panel {
        max-width: 18rem !important;
    }

    .fi-dropdown-panel .fi-dropdown-list-item-label {
        font-size: 10px;
    }
}
Jump to solution
Filament banner
FilamentJoin
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire
20,307Members
Resources

Similar Threads

Was this page helpful?
Recent Announcements

Similar Threads

fi-badge css
FilamentFFilament / ❓┊help
3y ago
Dropdown Panel Position
FilamentFFilament / ❓┊help
5mo ago
how can I overide $panel variable
FilamentFFilament / ❓┊help
11mo ago
Extra css in panel
FilamentFFilament / ❓┊help
12mo ago