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>
