Filament•15mo ago

Input and dropdown blade component

I am trying to create my custom search, I use Input and dropdown blade components, the problem I face is after search the input field is push over to top, it cannot be visible, how can I prevent input field push over to top

<div>
    <x-filament::input.wrapper>
        <x-filament::input
            type="search"
            placeholder="Search lyrics"
            wire:model.live="query"
        />
    </x-filament::input.wrapper>

    @if ($query)
        <x-filament::dropdown.list>
            @forelse ($lyrics as $lyric)
                <x-filament::dropdown.list.item
                    class="bg-gray-200 dark:bg-gray-800"
                    href="/hla/{{ $lyric->slug }}"
                    tag="a"
                >
                    {{ $lyric->title }}
                </x-filament::dropdown.list.item>
            @empty
                <x-filament::dropdown.list.item
                    class="bg-gray-200 dark:bg-gray-800"
                >
                    Not found
                </x-filament::dropdown.list.item>
            @endforelse
        </x-filament::dropdown.list>
    @endif
</div>

<div>
    <x-filament::input.wrapper>
        <x-filament::input
            type="search"
            placeholder="Search lyrics"
            wire:model.live="query"
        />
    </x-filament::input.wrapper>

    @if ($query)
        <x-filament::dropdown.list>
            @forelse ($lyrics as $lyric)
                <x-filament::dropdown.list.item
                    class="bg-gray-200 dark:bg-gray-800"
                    href="/hla/{{ $lyric->slug }}"
                    tag="a"
                >
                    {{ $lyric->title }}
                </x-filament::dropdown.list.item>
            @empty
                <x-filament::dropdown.list.item
                    class="bg-gray-200 dark:bg-gray-800"
                >
                    Not found
                </x-filament::dropdown.list.item>
            @endforelse
        </x-filament::dropdown.list>
    @endif
</div>

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Input and dropdown blade component