Webshooters Logo

Hoe je een dropdown laat werken

Gebruik PanelsRenderHook om een dropdown in de Topbar te plaatsen. Voeg teleport toe aan <x-filament::dropdown> om de dropdown boven de pagina-content te renderen, zoals Filament doet.

Hoe je een dropdown laat werken

Wanneer je via de PanelsRenderHook dingen in je Topbar zet gebruik je natuurlijk de volgende structuur:

FilamentView::registerRenderHook(PanelsRenderHook::GLOBAL_SEARCH_AFTER, function () {
     return view('custom-view');
 });

Maar wanneer je iets wil registreren in de topBar waarbij je een dropdown gebruikt kom je misschien tegen het probleem aan dat de dropdown-content zich gaat verschuilen achter de content van je pagina, zoals in dit voorbeeld (foto 1)!

Het gewenste resultaat is natuurlijk dat je de dropdown boven de content krijgt, zoals je hier ziet (foto 2).

Om dit te fixen voeg je simpelweg de attribute teleport toe aan je dropdown, zoals hier:

<x-filament::dropdown width="xl" placement="bottom-end" teleport>
</x-filament::dropdown>

Dit zorgt er voor dat de dropdown boven de normale HTML DOM wordt gerenderd.

Terug