Menu is trap inside table

[killemalljustice]

• Headless UI: v1.6.4
• Headless UI Float: v0.7.0
• Framework: vue v3.2.37

Hi, i am having problems with the menu component inside a table, as you can see in the screenshot the menu is cut by the end of the table, how can i make the menu appear over the borders of the table?

<template>
    <Menu as="div" class="relative inline-block text-left">
        <Float placement="bottom-end">
            <MenuButton
                class="inline-flex w-full justify-center rounded-md bg-black bg-opacity-30 px-4 py-2 text-sm font-medium text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
                Ver
                <ChevronDownIcon class="ml-2 -mr-1 h-5 w-5 text-violet-200 hover:text-violet-100" aria-hidden="true" />
            </MenuButton>
            <transition
                enter-active-class="transition duration-100 ease-out"
                enter-from-class="transform scale-95 opacity-0"
                enter-to-class="transform scale-100 opacity-100"
                leave-active-class="transition duration-75 ease-in"
                leave-from-class="transform scale-100 opacity-100"
                leave-to-class="transform scale-95 opacity-0">
                <MenuItems
                    :unmount="false"
                    class="absolute right-0 w-40 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="px-1 py-1">
                        <slot></slot>
                    </div>
                </MenuItems>
            </transition>
        </Float>
    </Menu>
</template>

<script setup>
    import { Menu, MenuButton, MenuItems } from '@headlessui/vue'
    import { ChevronDownIcon } from '@heroicons/vue/solid'

    import { Float } from '@headlessui-float/vue'
</script>

This is ok

This is not

Thanks for your help.

[ycs77]

Please provide a minimal working example (like github repo, codesandbox, stackblitz...) with the table and menu.

[ycs77]

If just look at screenshot, I guess your table or tr have css property like overflow: hidden;.

[killemalljustice]

If just look at screenshot, I guess your table or tr have css property like overflow: hidden;.

Yeah, it was the overflow: hidden in the table, thanks.