如何使 Antd 选择下拉锚点到选择的右侧

【问题标题】：How To Make Antd Select Dropdown Anchor To Right Of Select如何使 Antd 选择下拉锚点到选择的右侧
【发布时间】：2022-01-07 21:27:08
【问题描述】：

我使用 Ant-Design，在一个组件中我有一个 Select，它位于屏幕的右侧。有些标签很长，因此当下拉菜单出现时，它会溢出并出现滚动条。我希望将下拉锚点放在Select 按钮的右侧而不是左侧，从而保持标签长度但避免溢出而不隐藏任何内容，但 Antd 不会公开 API为此，我无法弄清楚要弄乱哪个 CSS 属性... 沙盒示例is here。

【问题讨论】：

标签： javascript html css reactjs antd

【解决方案1】：

这在文档中没有描述，但由于版本 4.17.0 Select 支持 placement 属性。

export default function App() {
  const [value, setValue] = useState("short");

  return (
    <div
      className="App"
      style={{
        position: "relative"
      }}
    >
      <Select
        value={value}
        style={{
          position: "absolute",
          right: "20px"
        }}
        dropdownMatchSelectWidth={false}
        onChange={(v) => setValue(v)}
        placement={"bottomRight"}
      >
        <Select.Option value="short">Short</Select.Option>
        <Select.Option value="long">
          Really Long Label That Makes Everything Weird
        </Select.Option>
      </Select>
    </div>
  );
}

链接到changelog

【讨论】：