Tailwind Dropdown Menu gets cutoff by table content

I am working on building a table styled with Tailwind and in this table I have an "Options" button that opens a dropdown for users (things like "mark as favorite" or "delete", etc)

The problem is that the dropdown menu items get cut off by the end of the table content, forcing the user to scroll to see the options in their entirity.

I have tried changing the z-index, but from what I can tell in other forums, the issue is not the z-index, it's the rendering and content order.

I'm not sure how to solve this issue so that the menu items always show up "on top" of everything else when it is opened.

Here is a sample of the table:

<table class="min-w-full table-auto divide-y divide-gray-200 dark:divide-gray-700">
    <tbody>
    <tr tabindex="0"
        class="focus:outline-none hover:bg-gray-100 h-16 border border-gray-100 rounded">
        <td>
            <Menu as="div" class="relative inline-block text-left">
                <div>
                    <MenuButton
                        class="inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                        Options
                        <ChevronDownIcon class="-mr-1 h-5 w-5 text-gray-400"
                                         aria-hidden="true"/>
                    </MenuButton>
                </div>    

                <transition enter-active-class="transition ease-out duration-100"
                            enter-from-class="transform opacity-0 scale-95"
                            enter-to-class="transform opacity-100 scale-100"
                            leave-active-class="transition ease-in duration-75"
                            leave-from-class="transform opacity-100 scale-100"
                            leave-to-class="transform opacity-0 scale-95">
                    <MenuItems
                        class="absolute z-50 right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                        <div class="py-1">
                            <MenuItem v-slot="{ active }">
                                <a href="#"
                                   :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Edit</a>
                            </MenuItem>
                            <MenuItem v-slot="{ active }">
                                <a href="#"
                                   :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Duplicate</a>
                            </MenuItem>
                        </div>
                        <div class="py-1">
                            <MenuItem v-slot="{ active }">
                                <a href="#"
                                   :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Archive</a>
                            </MenuItem>
                            <MenuItem v-slot="{ active }">
                                <a href="#"
                                   :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Move</a>
                            </MenuItem>
                        </div>
                        <div class="py-1">
                            <MenuItem v-slot="{ active }">
                                <a href="#"
                                   :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Share</a>
                            </MenuItem>
                            <MenuItem v-slot="{ active }">
                                <a href="#"
                                   :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Add
                                    to favorites</a>
                            </MenuItem>
                        </div>
                        <div class="py-1">
                            <MenuItem v-slot="{ active }">
                                <a href="#"
                                   :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Delete</a>
                            </MenuItem>
                        </div>
                    </MenuItems>
                </transition>
            </Menu>
        </td>
    </tr>
    ...
    </tbody>

and here is a screenshot of the cutoff.

I can change the 'absolute' and 'inline-flex' options of the MenuButton and MenuItems components, but doing so also seems to interact with the overflow of the table and changes the scrolling behavior on mobile.

LaryAI

2 years ago

Level 58

To solve the issue of the dropdown menu items getting cut off by the table content, you can make the following changes to the code:

Add a higher z-index value to the dropdown menu container to ensure it appears on top of other elements. Update the MenuItems component with the z-50 class:

<MenuItems class="absolute z-50 right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-50">

Adjust the positioning of the dropdown menu container to prevent it from being cut off by the table. Update the MenuItems component with the top-12 class:

<MenuItems class="absolute z-50 right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-50 top-12">

If the dropdown menu still gets cut off, you can try adding a higher z-index value to the table container as well. Update the table element with the z-10 class:

<table class="min-w-full table-auto divide-y divide-gray-200 dark:divide-gray-700 z-10">

By applying these changes, the dropdown menu should appear on top of the table content and not get cut off.

Here is the updated code:

<table class="min-w-full table-auto divide-y divide-gray-200 dark:divide-gray-700 z-10">
    <tbody>
        <tr tabindex="0" class="focus:outline-none hover:bg-gray-100 h-16 border border-gray-100 rounded">
            <td>
                <Menu as="div" class="relative inline-block text-left">
                    <div>
                        <MenuButton class="inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                            Options
                            <ChevronDownIcon class="-mr-1 h-5 w-5 text-gray-400" aria-hidden="true"/>
                        </MenuButton>
                    </div>    

                    <transition enter-active-class="transition ease-out duration-100"
                                enter-from-class="transform opacity-0 scale-95"
                                enter-to-class="transform opacity-100 scale-100"
                                leave-active-class="transition ease-in duration-75"
                                leave-from-class="transform opacity-100 scale-100"
                                leave-to-class="transform opacity-0 scale-95">
                        <MenuItems class="absolute z-50 right-0 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none z-50 top-12">
                            <div class="py-1">
                                <MenuItem v-slot="{ active }">
                                    <a href="#" :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Edit</a>
                                </MenuItem>
                                <MenuItem v-slot="{ active }">
                                    <a href="#" :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Duplicate</a>
                                </MenuItem>
                            </div>
                            <div class="py-1">
                                <MenuItem v-slot="{ active }">
                                    <a href="#" :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Archive</a>
                                </MenuItem>
                                <MenuItem v-slot="{ active }">
                                    <a href="#" :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Move</a>
                                </MenuItem>
                            </div>
                            <div class="py-1">
                                <MenuItem v-slot="{ active }">
                                    <a href="#" :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Share</a>
                                </MenuItem>
                                <MenuItem v-slot="{ active }">
                                    <a href="#" :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Add to favorites</a>
                                </MenuItem>
                            </div>
                            <div class="py-1">
                                <MenuItem v-slot="{ active }">
                                    <a href="#" :class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Delete</a>
                                </MenuItem>
                            </div>
                        </MenuItems>
                    </transition>
                </Menu>
            </td>
        </tr>
        ...
    </tbody>    
</table>

Please give it a try and let me know if it solves the issue.

garrettmassey

2 years ago

Level 6

@LaryAI Unfortunately changing the z-index using the utility classes does not solve the issue.

garrettmassey

2 years ago

Level 6

Added context, I have also tried using Teleport to render the menu items after the fact, but I can't figure out how to position it correctly.

Please or to participate in this conversation.