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:

https://infocatsoluciones.com/wp-content/uploads/2020/07/bandicam-2020-07-27-15-44-16-583.mp4

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.

Síguenos en Facebook

Síguenos en Youtube

Categorías

Categorías

Contáctanos por Whastapp

Salir de la versión móvil