Elemento de arranque Select2 no se ajusta según lo esperado

Question

Estoy tratando de establecer el diseño de mi página con Bootstrap input-group y form-control, uno de los cuales envuelve un Seleccionar2 elemento. Aquí hay una parte de mi código HTML: Status Invoice ... Se ve así: Yo esperaba el select2 El borde derecho del elemento para alinearse con la entrada de abajo. Traté de establecer style= width: 100%;  para el div que contiene select2. Pero luego el ancho del select2 se convirtió en el mismo que el ancho completo del elemento abajo y fue a otra fila. ¿Cómo hago? select2 el elemento llenar todo el espacio libre de la columna pero no más? Traté de establecer width manualmente a algo como 77%, pero se mantiene sólo en el ancho de ventana específico así que no es una solución en absoluto.

codecrafty · Accepted Answer

Actualización para trabajar con JQuery select2

Select2 reemplaza al nativo select elemento con un elemento que genera y administra. Cuando genera su elemento, mira el tamaño del padre al tamaño mismo, si usted tamaño el elemento padre, el select2 tendrá el tamaño que usted espera.

Uso width no te dará los resultados esperados porque estás dentro input-group que es flex elemento, puede hacer que el contenedor crezca utilizando el flex propiedad

Ya que su ejemplo utiliza Bootstrap4, y hay un bootstrap4 tema para ello, puede utilizarlo directamente, ya sea a través del CDN, o instalar, para hacer que el estilo select2 coincida con el resto de sus entradas.

$('#status').select2({
  theme: 'bootstrap4'
});

$('#status-s').select2({
  // ...
});

$('#status-w').select2({
  // ...
});

#s2-container-good {
  flex: 1;
}

#s2-container-width {
  width: 100%;
}


[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
[email protected]/dist/css/select2.min.css" rel="stylesheet" />

[email protected]/dist/select2-bootstrap4.min.css" integrity="sha256-J6L5BfjnEuIwj6+OSc2OBxc8+BEGW3ZTz7wDHepaayI=" crossorigin="anonymous">


  Using flex: 1
  
    
      Status
    
    
      
    
  
  
    
      Invoice
    
    
  
   This select will not use the full width 
  No CSS
  
    
      Status
    
    
      
    
  
   This select will jump to the next line 
  Width: 100%
  
    
      Status

Respuesta original a continuación

Quitar el div Envolver el selecto y funcionará.

 CSS only 
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">


  
    
      Status
    
    
  
  
    
      Invoice
    
    
  
  ...

Respondida el Dec 16, 2020 a las 20:18 - por codecrafty

Votos positivos: 0 | Votos negativos: 0

Gpt · Answer

Para lograr que el elemento Select2 se ajuste correctamente dentro del input-group con Bootstrap, puedes seguir los siguientes pasos:

En primer lugar, asegúrate de que estás cargando Select2 correctamente en tu proyecto.

Puedes usar la clase de Bootstrap `flex-fill` en el `div` que contiene el `select` para que ocupe todo el espacio disponible dentro del `input-group`. Esto permitirá que el elemento Select2 se expanda hasta el borde del `input-group`.

Aquí te muestro cómo puedes modificar tu código HTML:

Al agregar la clase flex-fill al div que contiene el elemento Select2, deberías lograr que el elemento ocupe todo el espacio disponible dentro del input-group sin romperse a otra fila como en tu segundo intento.

Espero que esta solución te sea de ayuda. Si necesitas más asistencia, ¡no dudes en preguntar!

Respondida el Dec 17, 2020 a las 20:22 - por Gpt

Gemini · Answer

Para que el elemento Select2 llene todo el espacio libre de la columna sin salirse de ella, puedes utilizar la propiedad CSS flex-grow. Esta propiedad controla cuánto crece un elemento flexible en comparación con sus elementos hermanos.

Aquí tienes cómo puedes actualizar tu código HTML y CSS:

HTML:

CSS:

css
.flex-grow-1 {
    flex-grow: 1;
}

El CSS flex-grow: 1 hace que el div contenedor del elemento Select2 crezca para ocupar todo el espacio restante en la columna.

Esta solución debería hacer que el elemento Select2 llene todo el espacio disponible sin salirse de la columna.

Respondida el Dec 17, 2020 a las 20:28 - por Gemini

Elemento de arranque Select2 no se ajusta según lo esperado

3 Respuestas:

Actualización para trabajar con JQuery select2

Respuesta original a continuación