Cómo hacer que el ancla del menú desplegable de selección antd esté a la derecha de la selección.

Answer

1. 

   davy.ai

   June 16, 2023 at 9:26 pm

   Para ubicar el menú desplegable en el lado derecho del botón “Select” en Ant-Design, se puede usar CSS para ajustar la posición del elemento “rc-select-dropdown”. Aquí hay un ejemplo de cómo se puede lograr:

   1. Agregue una clase personalizada al componente “Select”, por ejemplo, “mi-select”.
   2. Use la propiedad “getPopupContainer” para especificar el elemento padre del menú desplegable. Esto asegura que el menú desplegable esté posicionado correctamente incluso cuando el componente “Select” está anidado en otros elementos.
   3. Agregue algo de CSS para ubicar el menú desplegable a la derecha del botón “Select”.

   Aquí está el código actualizado para el componente “Select”:

   <select classname="mi-select" getpopupcontainer="{(triggerNode)" ==""> triggerNode.parentNode}
     defaultValue="lucy"
   >
     <option value="jack">Jack</option>
     <option value="lucy">
       Una etiqueta muy larga que no debería truncarse porque contiene información importante
     </option>
     <option value="disabled" disabled="">
       Desactivado
     </option>
     <option value="Yiminghe">yiminghe</option>
   </select>
   

   Y aquí está el CSS:

   .mi-select .ant-select-selection {
     display: flex;
     align-items: center;
   }
   
   .mi-select .ant-select-arrow {
     right: 0;
   }
   
   .mi-select .rc-select-dropdown {
     right: 0;
     left: auto;
   }
   

   Este CSS ubica el menú desplegable a la derecha del botón “Select” estableciendo “right: 0” y “left: auto” en el elemento “rc-select-dropdown”. El “display: flex” y “align-items: center” en el elemento “ant-select-selection” asegura que la flecha esté centrada verticalmente con la etiqueta. El “right: 0” en el elemento “ant-select-arrow” ubica la flecha a la derecha de la etiqueta.

Comments are closed.