在 Tailwind 和 React 顶部显示子菜单时如何保持 div 大小

Question

使用 Tailwind 和 React - 当点击一个图标时，我会显示一个子菜单，但碰巧当容器 div 显示时，它的高度会自动变大。

如何将此子菜单显示在其他元素之上，以免使其容器 div 变大？我尝试固定，但它从我要求显示的位置移动。

这是代码：

Table 点击时显示子菜单：

            <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>

菜单组件，这里有图标和我点击它时显示的内容，但它加宽了父级 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>

这是点击时的截图，使父级 div 的尺寸变大：

这是点击前的样子：

单击容器 div 使其变宽：

在子菜单上使用 abosulte

Answer 1

您最有可能在直接父级上使用 relative 定位寻找 absolute 定位，以便绝对元素的位置锚定到其直接父级。

像这样的东西应该可以工作：

<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>

虽然我希望您必须稍微调整一下才能获得您想要的结果。可能还值得研究 blur 事件，以便在失去焦点后自动隐藏弹出窗口。

在 Tailwind 和 React 顶部显示子菜单时如何保持 div 大小

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

javascript

css

reactjs

tailwind-css