时间戳

首页 > 解决方案 > ReactJS 中的 Dropdown Broken 布局问题

css - ReactJS 中的 Dropdown Broken 布局问题

问题描述

我的反应应用程序中有一个使用样式组件的下拉列表。它就像我在 Windows 上的 google chrome 上所期望的那样工作。它应该位于省略号按钮的顶部，右侧有一些空间。问题出在野生动物园上，它被剪到右边了吗？

请在此处检查我的代码沙箱 单击此处

const DropdownMenu = styled.span`
  border-radius: 8px;
  display: ${({ show }) => (show ? "block" : "none")};
  position: absolute;
  background-color: #ffffff;
  width: 141px;
  height: 100px;
  filter: drop-shadow(0 7px 7px #00000029);
  z-index: 1;
  margin-bottom: 10rem;
  margin-right: 5rem;
`;

标签： cssreactjsreact-hooksstyled-components

解决方案

我分叉了你的沙盒并编辑了你的一些属性。现在它也适用于 Safari。请参阅：https ://codesandbox.io/s/open-specific-menu-in-reactjs-forked-4spdp?file=/src/Form.js

我给下拉菜单一个相对于按钮的位置（底部：100%；右侧：0）。现在它知道它应该在哪里了。

const ButtonSection = styled.div`
  ...
  position: relative;
`;

const DropdownMenu = styled.span`
  ...
  bottom: 100%;
  right: 0;
`;

推荐阅读