FilamentF
Filament•15mo ago
klinci_rabbit

Seeking Help with Custom Login Design Overlap in Filament

Hello everyone,

I'm currently working on a custom login page using Filament, but I'm running into an issue where my design overlaps with the default Filament styles. I want to ensure that my login page displays correctly without any interference from Filament's default components.

Here's What I've Done So Far:

  • Created a Custom Login View: I've built a login view in resources/views/clients/login.blade.php with Tailwind CSS for styling.
  • Used Livewire: Implemented Livewire for form handling with the directive wire:submit.prevent="authenticate".
  • Updated the ClientPanelProvider: Configured the login method to use my custom login class.
### Issues Faced:
  • The custom design still overlaps with default Filament elements, leading to a cluttered appearance.
  • I’ve tried disabling certain render hooks and inspecting elements but haven't resolved the overlap.
### What I Need Help With:
  • Isolating My Custom Design: Any tips on how to ensure my custom login view is completely isolated from Filament's default styles?
  • CSS Overrides: Suggestions for CSS rules or classes to apply that might help prevent the overlap.
  • Best Practices: Recommendations on configuring Filament to avoid such conflicts in the future.
Any advice or insights from the community would be greatly appreciated! Thank you in advance for your help!
Was this page helpful?