Tamaño Width con Dropdown-Menu de bootstrap-select

Cuando tenemos options demasiados largos, nuestra web se distorciona cuando utilizamos el plugin de bootstrap-select.

Tenemos que el contenido es muy extenso:

Y obtener esto, todo cuadrado al menos en pantallas más cortas a todo el texto:

Lo que tenemos que hacer, al menos para que encaje exacto en el ancho del dispositivo, es poner el CSS siguiente:

.bootstrap-select .dropdown-menu{
   max-width: 100%!important;
}

El código utilizado para obtener el mismo resultado de las imágenes es en el CSS:

#divComboBusqueda .dropdown-toggle{
   color: #495057;
   background-color: #fff;
   background-clip: padding-box;
   border: 1px solid #ced4da;
   border-radius: .25rem;
   transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.bootstrap-select .dropdown-menu{
   max-width: 100%!important;
}

Y del lado del HTML es:

<select class="form-control selectpicker" data-live-search="true" data-size="5" >
   <option>Textos</option>
</select>

Compartir:

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on print
Share on whatsapp

Sobre el autor:

Infocat

Infocat

Mi nombre es Carlos A. Pariona Valencia, soy programador, mi equipo y yo contamos con 8 años de experiencia en el campo de Desarrollo de Software y recientemente en Apps.

¿Tú que opinas?