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 NikolaOP•7d ago

toeknee•7d 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>