How to keep div size when showing submenu on top Tailwind and React

Issue

Using Tailwind an React - When clicking on an icon I show a submenu but it happens that when the container div is shown it becomes bigger in its height automatically.

How can I display this submenu on top of the other elements so that it doesn't make its container div bigger? I tried with fixed but it moves from the place I require it to be displayed.

This is the code:

The table where I show the submenu when clicking:

<div className="flex flex-wrap m-5 mx-auto w-full pr-2 pl-2">
    <div className="w-full px-4">
    <div className="flex flex-wrap">
        <div className="flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-white">
        <div className="block w-full overflow-x-auto">
            <table className="items-center w-full bg-transparent border-collapse">
            <thead className="bg-sky-50">
                <tr>
                <th className="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold bg-blueGray-50 text-blueGray-500 border-blueGray-100">
                    Opciones
                </th>
                </tr>
            </thead>
            <tbody>
                <tr className="hover:bg-slate-100">
                <td className="border-t-0 px-6 align-middle border-l-0 text-center border-r-0 text-xs whitespace-nowrap p-4">
                    <div>
                    <OptionsDropDown
                        showDropdown={showDropdown}
                        setShowDropdown={setShowDropdown}
                        dataDropDown={dataDropDown}
                    />
                    </div>
                </td>
                </tr>
            </tbody>
            </table>
        </div>
        </div>
    </div>
    </div>
</div>

Menu Component, Here I have the icon and what I show when I click on it but it widens the parent div:

<div className="flex justify-center">
    <button
    ref={ref}
    className="flex items-center 
                text-black  py-2 px-2
                text-2xl hover:text-cyan-700"
    onClick={() => setShowDropdown(!showDropdown)}
    >
    <FiMoreVertical />
    </button>

    {showDropdown && (
    <div className="relative bg-white text-base z-50 py-2 rounded shadow-lg">
        {dataDropDown.map((option, index) => (
        <div key={index}>
            <a href="" className="block px-4 py-2 hover:bg-indigo-300">
            {option.edit}
            </a>
            <a href="" className="block px-4 py-2 hover:bg-indigo-300">
            {option.delete}
            </a>
        </div>
        ))}
    </div>
    )}
</div>

Here is a screenshot of what it looks like right now on click, making the size of the parent div higher:

Here it is before clicking:

Clicking the container div makes it wide:

Using abosulte on submenu

Solution

You're most likely looking for absolute positioning using a relative positioning on the direct parent so that the position of the absolute element is anchored to its immediate parent.

Something like this should work:

<div className="relative flex justify-center">
{/* NOTE: the relative positioning above */}

            <button ref={ref} 
                className="flex items-center 
                         text-black  py-2 px-2
                           text-2xl hover:text-cyan-700"
                onClick={ ()=> setShowDropdown(!showDropdown) }>
                <FiMoreVertical/>
            </button>
            
            {
                showDropdown && ( 
                    <div className="absolute right-0 top-1/2 -translate-y-1/2 bg-white text-base z-50 py-2 rounded shadow-lg">
                        {/* which allows this to anchor */}
                        {
                            dataDropDown.map( (option, index) => (
                                <div key={index}>
                                    <a  href="" className="block px-4 py-2 hover:bg-indigo-300">{option.edit}</a>
                                    <a  href="" className="block px-4 py-2 hover:bg-indigo-300">{option.delete}</a>
                                </div>
                            ))
                        }
                    </div>
                )
            }
        </div>

although I expect you'll have to tweak it slightly to get the results that you want. It might also be worth looking into the blur event to automatically hide the popup once it loses focus.

Answered By - mitchazj