Блог

Я использую Ant-Design, и в компоненте, который у меня есть Select , он находится справа от экрана. Некоторые метки очень длинные, и поэтому, когда появляется выпадающий список, он переполняется и появляется полоса прокрутки. Я хотел бы иметь выпадающую привязку к правой стороне Select кнопки, а не к левой стороне, таким образом сохраняя длину метки, но избегая переполнения, ничего не скрывая, но Antd не предоставляет API для этого, и я не могу понять, какое свойство CSS испортитьс помощью… Пример песочницы здесь.

Это не описано в документации, но начиная с версии 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>
  );
}
 

Ссылка на журнал изменений