如何使 Antd Select 下拉锚点位于 Select 右侧

Question

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

Answer 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>
  );
}

Link 至 changelog

如何使 Antd Select 下拉锚点位于 Select 右侧

How To Make Antd Select Dropdown Anchor To Right Of Select

html

javascript

css

reactjs

antd