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•5mo 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

How can i override fi-dropdown-panel css

Similar Threads

How can i override fi-dropdown-panel css

Similar Threads

Similar Threads

Similar Threads