Uso Ant-Design y en un componente tengo un Select que se coloca a la derecha de la pantalla. Algunas de las etiquetas son muy largas y, por lo tanto, cuando aparece el menú desplegable, se desborda y aparece una barra de desplazamiento. Me gustaría tener el ancla desplegable en el lado derecho del botón Select en lugar del lado izquierdo, manteniendo así la longitud de la etiqueta pero evitando el desbordamiento sin ocultar nada, pero Antd no expone una API para hacer esto y no puedo descifrar con qué propiedad CSS meterme... Un ejemplo de Sandbox está aquí .
Esto no se describe en la documentación, pero desde la versión 4.17.0 , Select admite la propiedad de 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> ); }Enlace al registro de cambios