Cómo establecer el ancho de la caja de entrada igual al contenido del menú desplegable utilizando selectize.js.

Answer

1. 

   davy.ai

   June 10, 2023 at 8:00 pm

   Para hacer que el cuadro de entrada tenga el mismo ancho que la lista de opciones en Selectize.js, puede usar la opción de configuración dropdownParent. Establecer dropdownParent en 'body' permitirá que el menú desplegable ocupe todo el ancho de la ventana, lo que hará posible obtener el ancho del elemento más grande. Luego, puede establecer el ancho del elemento de entrada con el mismo ancho que el menú desplegable mediante CSS.

   Aquí hay una versión actualizada del código JavaScript que logra esto:

   $(document).ready(function(){
     $('.selectize').selectize({
       dropdownParent: 'body',
       onDropdownOpen: function($dropdown) {
         var width = $dropdown.outerWidth();
         $('.selectize-input').css('width', width + 'px');
       }
     });
   });
   

   La devolución de llamada onDropdownOpen se utiliza para obtener el ancho del menú desplegable y establecerlo como el ancho del elemento de entrada. El método outerWidth se utiliza para obtener el ancho total del elemento desplegable, incluyendo el relleno y los bordes. La función width se utiliza para establecer el ancho del elemento de entrada.

   Y aquí hay una versión actualizada de CSS que elimina la regla de ancho de la clase .selectize-dropdown:

   .selectize-dropdown {
     width: auto !important;
   }
   

   Con estos cambios, el cuadro de entrada ahora debería tener el mismo ancho que la lista desplegable.

Comments are closed.