Customizing Section Classes
Hello - does anyone know how to remove the
gap-6 from the default Section view? I've tried ->extraAttributes(['class' => 'gap-0']) but it has no effect. The gap-6 overrides it. I've tried using !important but that didn't work either. I'm trying to avoid publishing the view and removing it completely - I only need to remove the gap from one specific section. Thank you!
Solution:Jump to solution
So just target the appropriate Div in a custom theme. Use extraAttributes to add a class then target the class in css with a custom theme.
8 Replies
Gap-0 is probably not in the filament default stylesheet. Any time you want to override you will need a custom theme. It’s just how tailwind works. https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme
It looks like it has something to do with the way the div is created
Gap doesn’t work with block only flex or grid.
But it sounds like something else might be causing issues. I’m pretty sure section uses grid, not block.
The default
gap-6 is applied later to a div that uses grid. The extraAttributes go to a different div
Solution
So just target the appropriate Div in a custom theme. Use extraAttributes to add a class then target the class in css with a custom theme.
Thank you!