Filament•3w ago

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 {...

Jump to solution

10 Replies

toeknee•3w ago

Can you post a screenshot of the issue and what your trying to achieve

jamesroOP•3w ago

I want to increase that dropdown width

toeknee•3w ago

In your custom css:

.fi-sidebar-nav-tenant-menu-ctn .\!max-w-\[14rem\] {
  max-width:500px !important;
}

.fi-sidebar-nav-tenant-menu-ctn .\!max-w-\[14rem\] {
  max-width:500px !important;
}

jamesroOP•3w ago

Unfortunately doesn't seems to be working

Vp•3w ago

Try like this

.fi-tenant-menu {
  &.fi-dropdown-panel {
    @apply max-w-4.5;
  }
}

.fi-tenant-menu {
  &.fi-dropdown-panel {
    @apply max-w-4.5;
  }
}

jamesroOP•3w ago

Still, doesn't work, as if the custom css doesnt match it I did

.fi-tenant-menu {
    & .fi-dropdown-panel {
        @apply max-w-4.5!;
    }
}

.fi-tenant-menu {
    & .fi-dropdown-panel {
        @apply max-w-4.5!;
    }
}

with a space after & now it match, but the widh doesn't change in dropdown

Vp•3w ago

Try like this, wrap inside component layer

@layer components {
  .fi-dropdown-panel {
    @apply max-w-[18rem]!;
  }
}

@layer components {
  .fi-dropdown-panel {
    @apply max-w-[18rem]!;
  }
}

jamesroOP•3w ago

That did it, thanks a lot! @Vp spoke too soon seems if i do: npm run build its not working only if i use npm run dev

Vp•3w ago

I have no idea now, will try to check more

Solution

jamesro•3w ago

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;
    }
}

Gaming

Programming

How can i override fi-dropdown-panel css

Did you find this page helpful?