If click ellipsis-horizontal button, dropdown is hidden into the table

Question

I wrote the code in Tailwindcss and Alpine js. If I click ellipsis-horizontal button, dropdown is hidden into the table. I adjust the Z index also but it also hidden into the table. I want to show that dropdown above the table.

https://codepen.io/rskelaa/pen/xxJEdrm/

<div class="flex flex-col border-b">
                            <div class="z-10 -my-2 overflow-x-auto md:overflow-x-auto sm:-mx-6 lg:-mx-8">
                                <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                                    <div class="overflow-hidden border-b border-gray-200 shadow sm:rounded-lg">

                                        <table class="relative min-w-full divide-y divide-gray-200 table-fixed">
                                            <thead class="bg-blue-600">
                                                <tr>
                                                    <th scope="col"
                                                        class="px-4 py-3 font-bold tracking-wider text-left text-gray-100 uppercase">

                                                        <span class="text-base text-gray-900">
                                                            <input class="w-4 h-4 border border-white" type="checkbox"
                                                                name="" id="">
                                                        </span>
                                                    </th>
                                                    <th scope="col"
                                                        class="px-4 py-3 font-bold tracking-wider text-left text-gray-100 uppercase">
                                                        Name
                                                    </th>

                                                    <th scope="col"
                                                        class="px-4 py-3 font-bold tracking-wider text-left text-gray-100 uppercase">
                                                        Paid Days
                                                    </th>
                                                    <th scope="col"
                                                        class="px-4 py-3 font-bold tracking-wider text-left text-gray-100 uppercase">
                                                        Net Pay
                                                    </th>
                                                    <th scope="col"
                                                        class="px-4 py-3 font-bold tracking-wider text-left text-gray-100 uppercase">
                                                        Taxes
                                                    </th>
                                                    <th scope="col"
                                                        class="px-4 py-3 font-bold tracking-wider text-left text-gray-100 uppercase">
                                                        Gross Pay
                                                    </th>
                                                    <th scope="col"
                                                        class="px-4 py-3 font-bold tracking-wider text-left text-gray-100 uppercase">
                                                        Action
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody class="bg-white divide-y divide-gray-200">

                                                <tr class="">
                                                    <td class="px-4 py-4 whitespace-nowrap">
                                                        <span class="text-base text-gray-900">
                                                            <input class="w-4 h-4 border border-white" type="checkbox"
                                                                name="" id="">
                                                        </span>
                                                    </td>
                                                    <td class="px-4 py-4 whitespace-nowrap">
                                                        <div>
                                                            <a href="employee-detail.html"
                                                                class="font-semibold text-blue-600">Elavarasan</a>
                                                            <p class="text-sm text-gray-600">67525165</p>
                                                        </div>
                                                    </td>
                                                    <td class="px-4 py-4 whitespace-nowrap">
                                                        <span class="text-base text-gray-900">
                                                            30
                                                        </span>
                                                    </td>
                                                    <td class="px-4 py-4 whitespace-nowrap">
                                                        <span class="text-base text-gray-900">
                                                            <span>₹</span> 15000
                                                        </span>
                                                    </td>
                                                    <td class="px-4 py-4 whitespace-nowrap">
                                                        <span class="text-base text-gray-900">
                                                            <span>₹</span> 3000
                                                        </span>
                                                    </td>
                                                    <td class="px-4 py-4 whitespace-nowrap">
                                                        <span class="text-base text-gray-900">
                                                            <span>₹</span> 18000
                                                        </span>
                                                    </td>
                                                    <td class="px-4 py-4 whitespace-nowrap">
                                                        <div class="px-2 text-gray-600 " x-data="{ isOpen: false }">
                                                            <button @click="isOpen = !isOpen"
                                                                @keydown.escape="isOpen = false"
                                                                class="flex items-center focus:outline-none">
                                                                <svg xmlns="http://www.w3.org/2000/svg" fill="none"
                                                                    viewBox="0 0 24 24" stroke-width="1.5"
                                                                    stroke="currentColor" class="w-6 h-6">
                                                                    <path stroke-linecap="round" stroke-linejoin="round"
                                                                        d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
                                                                </svg>

                                                            </button>
                                                            <ul x-show="isOpen" @click.away="isOpen = false"
                                                                class="absolute right-0 z-50 py-1 mt-2 overflow-hidden font-normal bg-white border rounded shadow w-72">

                                                                <li class="group hover:bg-indigo-100">
                                                                    <a href="my-account.html"
                                                                        class="flex items-center px-3 py-3 group-hover:text-indigo-800">
                                                                        <svg fill="currentColor"
                                                                            xmlns="http://www.w3.org/2000/svg"
                                                                            viewBox="0 0 24 24" width="24" height="24"
                                                                            class="mr-3 text-gray-600 text-blue-600 group-hover:text-indigo-800">
                                                                            <path
                                                                                d="M12 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm9 11a1 1 0 0 1-2 0v-2a3 3 0 0 0-3-3H8a3 3 0 0 0-3 3v2a1 1 0 0 1-2 0v-2a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v2z"
                                                                                class="heroicon-ui"></path>
                                                                        </svg>
                                                                        My Account
                                                                    </a>
                                                                </li>
                                                                <li class="group hover:bg-indigo-100">
                                                                    <a href="settings.html"
                                                                        class="flex items-center px-3 py-3 group-hover:text-indigo-800">
                                                                        <svg xmlns="http://www.w3.org/2000/svg"
                                                                            class="w-6 h-6 mr-3 text-gray-600"
                                                                            fill="none" viewBox="0 0 24 24"
                                                                            stroke="currentColor" stroke-width="2">
                                                                            <path stroke-linecap="round"
                                                                                stroke-linejoin="round"
                                                                                d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z">
                                                                            </path>
                                                                            <path stroke-linecap="round"
                                                                                stroke-linejoin="round"
                                                                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z">
                                                                            </path>
                                                                        </svg>
                                                                        Settings
                                                                    </a>
                                                                </li>
                                                                <li class="border-t group hover:bg-indigo-100">
                                                                    <a href="logout.html"
                                                                        class="flex items-center px-3 py-3 group-hover:text-indigo-800">
                                                                        <svg fill="currentColor"
                                                                            xmlns="http://www.w3.org/2000/svg"
                                                                            width="24" height="24" viewBox="0 0 24 24"
                                                                            class="mr-3 text-gray-600 text-blue-600 group-hover:text-indigo-800">
                                                                            <path d="M0 0h24v24H0z" fill="none"></path>
                                                                            <path
                                                                                d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z">
                                                                            </path>
                                                                        </svg>Sign out
                                                                    </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="flex justify-center mt-4">
                                <nav class="relative z-0 inline-flex -space-x-px shadow-sm" aria-label="Pagination">
                                    <a href="#"
                                        class="relative inline-flex items-center px-2 py-2 text-base font-medium text-gray-500 bg-white border border-gray-300 rounded-l-md hover:bg-indigo-100">
                                        <span class="sr-only">Previous</span>
                                        <!-- Heroicon name: chevron-left -->
                                        <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                            fill="currentColor" aria-hidden="true">
                                            <path fill-rule="evenodd"
                                                d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                                                clip-rule="evenodd"></path>
                                        </svg>
                                    </a>
                                    <a href="#"
                                        class="relative inline-flex items-center px-4 py-2 text-base font-medium text-gray-700 bg-white border border-gray-300 hover:bg-indigo-100">
                                        1
                                    </a>
                                    <a href="#"
                                        class="relative inline-flex items-center px-4 py-2 text-base font-medium text-gray-700 bg-white border border-gray-300 hover:bg-indigo-100">
                                        2
                                    </a>
                                    <a href="#"
                                        class="relative items-center hidden px-4 py-2 text-base font-medium text-gray-700 bg-white border border-gray-300 md:inline-flex hover:bg-indigo-100">
                                        3
                                    </a>
                                    <a href="#"
                                        class="relative inline-flex items-center px-4 py-2 text-base font-medium text-gray-700 bg-white border border-gray-300 hover:bg-indigo-100">
                                        4
                                    </a>
                                    <a href="#"
                                        class="relative inline-flex items-center px-4 py-2 text-base font-medium text-gray-700 bg-white border border-gray-300 hover:bg-indigo-100">
                                        5
                                    </a>
                                    <a href="#"
                                        class="relative inline-flex items-center px-2 py-2 text-base font-medium text-gray-500 bg-white border border-gray-300 rounded-r-md hover:bg-indigo-100">
                                        <span class="sr-only">Next</span>
                                        <!-- Heroicon name: chevron-right -->
                                        <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                            fill="currentColor" aria-hidden="true">
                                            <path fill-rule="evenodd"
                                                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                                                clip-rule="evenodd"></path>
                                        </svg>
                                    </a>
                                </nav>
                            </div>
                        </div>

Rectify this code, I m looking dropdown to above the table.

Answer 1

I had the same problem and what I did was to install Flowbite

Then change the dropdown to this

<a :data-dropdown-toggle="'dropdown-'+ myvar.id"
   class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-2 py-1 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 cursor-pointer">
   Actions
   <svg class="w-4 h-4 ml-2" aria-hidden="true" fill="none" stroke="currentColor"
      viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
         d="M19 9l-7 7-7-7"></path>
   </svg>
</a>
<div :id="'dropdown-' + myvar.id"
   class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
   <ul class="py-2 text-sm text-gray-700 dark:text-gray-200"
      aria-labelledby="dropdownDefaultButton">
      <li>
         <a
            class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white cursor-pointer"
            @click="myfunction($event, myvar)">Update</a>
      </li>
   </ul>
</div>