0

introducir la descripción de la imagen aquí

En la imagen anterior como pueden observar tengo un select pero este se encuentra dentro de un tbody la razón de esto es porque requiero listarlo dependiendo del numero de filas que tenga la tabla, el caso está que el input de busqueda el cual te permite buscar las diferentes opciones que tiene un select trae el tamaño por defecto ¿existe alguna manera de reducir ese tamaño al tamaño que tiene mi select?

<select class="select" name="usuario" style="width:100%;"><option value="0">-- Seleccione --</option></select>
$('.select').select2({
    theme: 'boostrap3'
 })

Intenté añadiéndole eso pero solo me cambia la forma de mi select y no el tamaño de la barra de búsqueda que tiene.

Quisiera que por lo menos al desplegar el select tuviera el mismo tamaño que el input de búsqueda o viceversa

1
  • Buenas, eso se hace con el css. O incluyendo una clase personalizada.
    – Excorpion
    Commented el 10 mar. 2021 a las 18:22

1 respuesta 1

0

De acuerdo a la documentación, tienes varias opciones para asignar el tamaño; lo mejor es especificar directamente en opciones al activar. También se puede a través de reglas CSS o aplicar estilo en línea a la etiqueta del select base:

(function() {
    $('#sel1').select2({theme: 'bootstrap', width: '200px'}); // Definir en opciones
    $('#sel2').select2({theme: 'bootstrap'}); // Ancho aplicado directamente en la etiqueta
    $('#sel3').select2({theme: 'bootstrap'}); // Ancho aplicado en reglas CSS
})();
table {
  width:80%;
  margin:20px auto;
}
#sel3 {
  width:300px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<select id="sel1">
  <option>África</option>
  <option>América</option>
  <option>Asia</option>
  <option>Europa</option>
  <option>Oceanía</option>
</select>

<table>
<tr>
  <td>Probando en tabla con width 100%</td>
</tr>
<tr>
  <td>
    <select id="sel2" style="width:100%">
      <option>África</option>
      <option>América</option>
      <option>Asia</option>
      <option>Europa</option>
      <option>Oceanía</option>
    </select>
  </td>
</tr>
</table>

<select id="sel3">
  <option>África</option>
  <option>América</option>
  <option>Asia</option>
  <option>Europa</option>
  <option>Oceanía</option>
</select>

Nota: No encontré CDN para estilos CSS del tema bootstrap3. En caso de que siga sin funcionar como esperas, edita la pregunta para agregar el enlace a los estilos y poder analizar o probar.

2
  • En la etiqueta select ya le tenía añadido un width="100%" para que ocupe todo el espacio dentro del td donde se encuentra, aún así la barra de busqueda del select2 no se sincroniza con el tamaño que debería tener el select, esta se muestra mas grande Commented el 11 mar. 2021 a las 13:10
  • @Sairento, en el fragmento de código funciona con style="width:100%;", probablemente el problema sea con el tema.
    – Triby
    Commented el 11 mar. 2021 a las 15:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.