Ajustar y centrar bootstrap-select dropdown Menu

Cuando estamos desarrollando una aplicación en un espacio reducido y se utiliza el plugin para los select combo con Bootstrap 4, derrepente jalamos una lista que tienen los datos demadiados extensos, en este caso cuentas contables y tenemos este error:

Como se ve el combo está totalmente descuadrado, fuera de lugar, para centrarlo y solucionarlo tu selectpicker debe estar como la siguiente estructura, con un div padre en mi caso llamado divCuentas:

<div class="form-group" id="divCuentas">
	<select class="selectpicker " data-live-search="true">
		<option value="-1">Sin cuenta</option>
		<option value="0">Valor 0</option>
		<option value="1">Valor 1</option>
	</select>
</div>

Y agregamos un poco de CSS al hijo que está mal posicionado en este caso es la clase dropdown-menu:

#divCuentas .dropdown-menu{
	width: 100%;
	transform: translate3d(0px, -574px, 0px)!important;
}

Y finalmente tendremos nuestro combo centrado y responsivo:

Espero que les haya servido.

Compartir

Sobre el autor:

Picture of Infocat

Infocat

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

¿Tú que opinas?

Más contenido que tenemos: