Although Filament offers an impressive admin panel, the dropdown menu may extend well beyond the viewport if your table has many filters or numerous toggleable columns. Particularly on smaller screens, this results in a frustrating user experience.
Thankfully, you can keep your interface tidy and functional by making these panels scrollable with a little custom CSS.
We’ll use the following custom CSS to:
- Limit the height of the column toggle dropdown ( .fi-ta-col-toggle .fi-dropdown-panel)
- Add vertical scrolling if the content overflows
- Add scroll to the filter form area ( .fi-fo-component-ctn)
Here’s the custom CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* Scrollable column toggle dropdown */ .fi-ta-col-toggle .fi-dropdown-panel { @apply h-[400px]; /* Limit height */ @apply overflow-y-auto; /* Enable vertical scroll if needed */ scroll-behavior: auto; /* Optional: control scrolling behavior */ } /* Scrollable filter form container */ .fi-ta-col-toggle .fi-fo-component-ctn { @apply pl-2; /* Padding for spacing */ @apply max-h-screen; /* Max height to prevent overflow */ @apply overflow-y-auto; /* Scroll when overflowing vertically */ } |
Update the CSS file
|
1 2 3 4 5 6 7 8 9 10 11 |
.fi-ta-col-toggle .fi-dropdown-panel { @apply h-[400px]; @apply overflow-y-auto; scroll-behavior: auto; } .fi-ta-col-toggle .fi-fo-component-ctn { @apply pl-2; @apply max-h-screen; @apply overflow-y-auto; } |
Now, when you open the Column Toggle dropdown or Filter Panel, if there are too many items, you’ll see a scrollable area instead of content overflowing beyond the screen.
Before
- Filters or column toggles could extend below the viewport
- Users had to scroll the whole page
After
- Each section scrolls independently
- Cleaner, more usable interface
Bonus: Accessibility & UX Tips
- Consider adding scroll-behavior: smooth for better UX (though auto is more predictable in dropdowns).
- You can add visual indicators for scrolling using shadow or gradient mask techniques.
- Ensure tab order is not broken by scroll containers — test with keyboard.
This small tweak significantly improves the usability of complex Filament tables, especially for admin panels with large datasets. Always remember to test across screen sizes and accessibility tools.