Блог

У меня есть выпадающее меню внутри одного из столбцов в таблице. Когда оно открыто, оно либо отключается (переполнение-скрыто), либо создается полоса прокрутки (переполнение-видно).

Как бы мне заставить это просто отображаться поверх таблицы (или «расширить» родительский 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'): amp;nbsp;
                    </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'): amp;nbsp;
                    </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;
}