如何解决下拉菜单会导致滚动
我在表格的一列内有一个下拉菜单。暴露后，它会被切除（隐藏）或创建滚动条（可见）。
如何将其显示在表格上方（或“扩展”父div，以便全部可见），以便唯一的滚动条是浏览器中的常用滚动条，而不是此特定于表格的滚动条。下面提供的代码。
<div class="flex flex-col">
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div class="shadow border-b border-gray-200 sm:rounded-lg overflow-auto">
<div class="flex flex-wrap m-4 justify-between">
<div class="flex items-center">
<div class="beep-label">
@lang('livewire.per_page'):
</div>
<select wire:model="perPage" class="beep-input align-middle w-auto inline-block">
<option>10</option>
<option>15</option>
<option>25</option>
</select>
</div>
<div class="flex">
<div class="beep-label pr-2 flex justify-center items-center h-full text-center">
@lang('one-word.filter'):
</div>
<input wire:model="search" class="beep-input" type="text" placeholder="@lang('livewire.search_users')...">
</div>
</div>
<table class="divide-y divide-gray-200 w-full">
<thead>
<tr>
<th class="beep-table-header h-full align-middle flex">
<div class="align-middle justify-items-auto">
<a wire:click.prevent="sortBy('name')" role="button" href="#" class="">
@include('livewire.includes._sort-icon',['field' => 'name'])
<div class="inline-block">@lang('one-word.name')</div>
</a>
</div>
</th>
<th class="beep-table-header">
<a wire:click.prevent="sortBy('users.email')" role="button" href="#" class="">
@include('livewire.includes._sort-icon',['field' => 'users.email'])
@lang('users.beep_email')
</a>
</th>
<th class="beep-table-header">
<a wire:click.prevent="sortBy('beep_extension')" role="button" href="#" class="">
@include('livewire.includes._sort-icon',['field' => 'beep_extension'])
@lang('livewire.beep_ext')
</a>
</th>
<th class="beep-table-header text-center">
@lang('one-word.action')
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
@foreach ($contacts as $contact)
<tr @if ($contact->is_active !== true) class="table-danger" @endif>
<td class="px-6 py-4 whitespace-no-wrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
@if ($contact->contactable->thumbnail)
<img class="h-10 w-10 rounded-full"
src="{{ $contact->contactable->thumbnail }}"
alt="">
@else
<x-nav.svg-icons icon="user-circle" class="w-3 h-3" />
@endif
</div>
<div class="ml-4">
<div class="text-sm leading-5 font-medium text-gray-900">
{{ $contact->name }}
</div>
<div class="text-sm leading-5 text-gray-500">{{ $contact->contactable->email }}</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-no-wrap">
<div class="text-sm leading-5 text-gray-900">{{ $contact->beep_mail }}</div>
</td>
<td class="px-6 py-4 whitespace-no-wrap">
<div class="text-sm leading-5 text-gray-900">{{ $contact->beep_extension }}</div>
</td>
<td class="px-6 py-4 whitespace-no-wrap text-center text-sm leading-5 font-medium">
<div x-data="{ open: false }" @keydown.window.escape="open = false" @click.away="open = false" class="relative inline-block text-left">
<div>
<span class="rounded-md shadow-sm">
<button @click="open = !open" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150" id="options-menu" aria-haspopup="true" aria-expanded="true">
@lang('one-word.action')
<!-- Heroicon name: chevron-down -->
<svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</span>
</div>
<div x-show="open" x-description="Dropdown panel,show/hide based on dropdown state." x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg z-10">
<div class="rounded-md bg-white shadow-xs">
<div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
@can ('view',$contact->contactable)
<a href="{{ route('users.show',$contact->contactable) }}" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">@lang('users.view_profile')</a>
@endcan
@can ('update',$contact->contactable)
<a href="{{ route('users.edit',$contact->contactable) }}" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">@lang('one-word.edit')</a>
<a href="{{ route('contacts.methods.index',$contact->contactable) }}" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">@lang('livewire.edit_contact_methods')</a>
<a href="#" wire:click="deactivate({{ $contact->id }})" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">{{ $contact->is_active ? __('one-word.deactivate') : __('one-word.activate') }}</a>
@endcan
</div>
</div>
</div>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
<div class="p-2 uppercase text-sm bg-gray-200">
{{ $contacts->links() }}
</div>
</div>
</div>
</div>
</div>
以及提取的CSS组件（如果有帮助的话）：
.beep-label {
@apply block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2;
}
.beep-input {
@apply appearance-none block w-full text-gray-700 border border-gray-500 rounded py-1 px-2 mb-3;
}
.beep-table-header {
@apply px-6 py-3 bg-gray-100 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。