为啥我的搜索栏随着微调器移动？

Posted 2023-03-07

【中文标题】为啥我的搜索栏随着微调器移动？

【英文标题】：why my searchbar is moving with the spinner?为什么我的搜索栏随着微调器移动？

【发布时间】：2021-03-12 03:01:18

【问题描述】：

我正在使用 laravel 8、Laravel-livewire 和 tailwind css。 我用顺风动画旋转制作了这个微调器，但是当它出现时，搜索栏会移动。如何解决这个问题？ 我的代码：

<div class="relative mt-3 md:mt-0">
    <!--   Search Bar Here   -->
    <input wire:model="search" type="text" class="bg-gray-800 text-sm rounded-full w-64 px-4 pl-8 py-1 focus:outline-none focus:shadow-outline" placeholder="Search">
    <div class="absolute top-0">
        <svg class="fill-current w-4 text-gray-500 mt-2 ml-2" viewBox="0 0 24 24"><path class="heroicon-ui" d="M16.32 14.9l5.39 5.4a1 1 0 01-1.42 1.4l-5.38-5.38a8 8 0 111.41-1.41zM10 16a6 6 0 100-12 6 6 0 000 12z"/></svg>
    </div>
    <!--   Spinner Here   -->
    <div wire:loading>
        <svg class="absolute animate-spin h-4 w-4 rounded-full bg-transparent border-2 border-transparent border-opacity-50 top-0 right-0 mr-2 mt-2" style="border-right-color: white; border-top-color: white;" viewBox="0 0 24 24"></svg>
    </div>
    @if(strlen($search) > 2)
        <div class="absolute text-sm bg-gray-800 rounded w-64 mt-4">
            <ul>
                @if ($searchResults->count() > 0)
                    @foreach ($searchResults as $result)
                        <li class="border-b border-gray-700">
                            <a href=" route('movies.show', $result['id']) " class="block hover:bg-gray-700 px-3 py-3 flex items-center">
                                @if($result['poster_path'])
                                    <img src="https://image.tmdb.org/t/p/w92/ $result['poster_path'] "  class="w-8">
                                @else
                                    <img src="https://via.placeholder.com/50x75"  class="w-8">
                                @endif
                                <span class="ml-4"> $result['title'] </span>

                            </a>
                        </li>
                    @endforeach
                @else 
                    <div class="px-3 py-3 text-sm">No Result for  $search  </div>
                @endif  
            </ul>
        </div>
    @endif
</div>

这是问题的视频 https://streamable.com/61l0ti

【参考方案1】：

尝试将aboslute 和其他定位CSS 规则移动到父div 而不是svg 本身。

<!--   Spinner Here   -->
<div wire:loading class="absolute top-0 right-0 mr-2 mt-2">
  <svg class="animate-spin h-4 w-4 rounded-full bg-transparent border-2 border-transparent border-opacity-50" style="border-right-color: white; border-top-color: white;" viewBox="0 0 24 24"></svg>
</div>