F
Filament•2mo ago
Señor Nikola

Style Issue With <x-filament::dropdown>

Did anyone had issue with filament dropdown component - like from video? 
<div>
    <x-filament::dropdown placement="bottom-start" class="panel-settings-dropdown">
        <x-slot name="trigger">
            <img class="header-cog" src="{{ Vite::image('svg/cog.svg') }}" alt="25" width="36" height="36">
        </x-slot>

        <x-filament::dropdown.list>

            <x-filament::dropdown.list.item
                    href="{{ \App\Filament\Pages\NavigationManager::getUrl() }}"
                    tag="a"
            >
                @lang('Navigation Manager')
            </x-filament::dropdown.list.item>

            <x-filament::dropdown.list.item
                    href="{{ \App\Filament\Pages\Settings::getUrl() }}"
                    tag="a"
            >
                @lang('Settings')
            </x-filament::dropdown.list.item>

            <x-filament::dropdown.list.item wire:click="toggleDebugMode">
                {{ get_settings_value('debug_mode') ? __('Disable Debug Mode') : __('Enable Debug Mode') }}
            </x-filament::dropdown.list.item>

        </x-filament::dropdown.list>
    </x-filament::dropdown>
    @push('scripts')
        <script>
            document.addEventListener('livewire:init', () => {
                Livewire.on('refresh-page', () => {
                    window.location.reload();
                });
            });
        </script>
    @endpush
</div>
<div>
    <x-filament::dropdown placement="bottom-start" class="panel-settings-dropdown">
        <x-slot name="trigger">
            <img class="header-cog" src="{{ Vite::image('svg/cog.svg') }}" alt="25" width="36" height="36">
        </x-slot>

        <x-filament::dropdown.list>

            <x-filament::dropdown.list.item
                    href="{{ \App\Filament\Pages\NavigationManager::getUrl() }}"
                    tag="a"
            >
                @lang('Navigation Manager')
            </x-filament::dropdown.list.item>

            <x-filament::dropdown.list.item
                    href="{{ \App\Filament\Pages\Settings::getUrl() }}"
                    tag="a"
            >
                @lang('Settings')
            </x-filament::dropdown.list.item>

            <x-filament::dropdown.list.item wire:click="toggleDebugMode">
                {{ get_settings_value('debug_mode') ? __('Disable Debug Mode') : __('Enable Debug Mode') }}
            </x-filament::dropdown.list.item>

        </x-filament::dropdown.list>
    </x-filament::dropdown>
    @push('scripts')
        <script>
            document.addEventListener('livewire:init', () => {
                Livewire.on('refresh-page', () => {
                    window.location.reload();
                });
            });
        </script>
    @endpush
</div>
7 Replies
Señor Nikola
Señor NikolaOP•2mo ago
No description
No description
toeknee
toeknee•2mo ago
No But try 
<div>
    <x-filament::dropdown placement="bottom-start" class="z-100 panel-settings-dropdown">
        <x-slot name="trigger">
            <img class="header-cog" src="{{ Vite::image('svg/cog.svg') }}" alt="25" width="36" height="36">
        </x-slot>

        <x-filament::dropdown.list>

            <x-filament::dropdown.list.item
                    href="{{ \App\Filament\Pages\NavigationManager::getUrl() }}"
                    tag="a"
            >
                @lang('Navigation Manager')
            </x-filament::dropdown.list.item>

            <x-filament::dropdown.list.item
                    href="{{ \App\Filament\Pages\Settings::getUrl() }}"
                    tag="a"
            >
                @lang('Settings')
            </x-filament::dropdown.list.item>

            <x-filament::dropdown.list.item wire:click="toggleDebugMode">
                {{ get_settings_value('debug_mode') ? __('Disable Debug Mode') : __('Enable Debug Mode') }}
            </x-filament::dropdown.list.item>

        </x-filament::dropdown.list>
    </x-filament::dropdown>
    @push('scripts')
        <script>
            document.addEventListener('livewire:init', () => {
                Livewire.on('refresh-page', () => {
                    window.location.reload();
                });
            });
        </script>
    @endpush
</div>
<div>
    <x-filament::dropdown placement="bottom-start" class="z-100 panel-settings-dropdown">
        <x-slot name="trigger">
            <img class="header-cog" src="{{ Vite::image('svg/cog.svg') }}" alt="25" width="36" height="36">
        </x-slot>

        <x-filament::dropdown.list>

            <x-filament::dropdown.list.item
                    href="{{ \App\Filament\Pages\NavigationManager::getUrl() }}"
                    tag="a"
            >
                @lang('Navigation Manager')
            </x-filament::dropdown.list.item>

            <x-filament::dropdown.list.item
                    href="{{ \App\Filament\Pages\Settings::getUrl() }}"
                    tag="a"
            >
                @lang('Settings')
            </x-filament::dropdown.list.item>

            <x-filament::dropdown.list.item wire:click="toggleDebugMode">
                {{ get_settings_value('debug_mode') ? __('Disable Debug Mode') : __('Enable Debug Mode') }}
            </x-filament::dropdown.list.item>

        </x-filament::dropdown.list>
    </x-filament::dropdown>
    @push('scripts')
        <script>
            document.addEventListener('livewire:init', () => {
                Livewire.on('refresh-page', () => {
                    window.location.reload();
                });
            });
        </script>
    @endpush
</div>
and try: npm run build
Señor Nikola
Señor NikolaOP•2mo ago
I have added above class panel-settings-dropdown which has z index of 9999 😅 Did not help
awcodes
awcodes•2mo ago
Add :teleport=“true” to your dropdown.
Señor Nikola
Señor NikolaOP•2mo ago
I get "Undefined constant "“true” "
toeknee
toeknee•2mo ago
the quotes are wrong use 
:teleport="true"
:teleport="true"
This might be helpful though too. https://medium.com/@harrisrafto/say-goodbye-to-z-index-issues-with-teleport-in-laravel-livewire-v3-7561afc402b1
Medium
Say goodbye to z-index issues with @teleport in Laravel Livewire v3
Dealing with z-index issues and DOM structure complexities can be frustrating, especially when working with modals and dynamically placed…
Señor Nikola
Señor NikolaOP•2mo ago
Thanks alot guys!

Did you find this page helpful?