I use Ant-Design and in a component I have a Select which is placed to the right of the screen. Some of the labels are very long, and therefore when the dropdown appears, it overflows and a scrollbar appears.
I would like to have the dropdown anchor to the right-hand side of the Select button rather than to the left-hand side, thus keeping the label length but avoiding the overflow without hiding anything, but Antd doesn't expose an API for doing this and I can't figure out which CSS property to mess with...
An example Sandbox is here.
This is not described in the documentation, but since version 4.17.0 the Select supports the placement property.
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 to changelog