Problemas con Awesomplete al usar Bootstrap

En este artículo te explicaré un problema que me pasó hace algún tiempo usando la librería Awesomplete y el framework Bootstrap.

Pasa que al hacer un autocompletado con AJAX,  el input perdía su estilo y se mostraba a la derecha de la etiqueta. Algo así:

Awesomplete con Bootstrap – Cambiando estilo de input

Cuando en realidad, debería mostrarse así:

Input correcto con awesomplete y Bootstrap

Corrigiendo problema

Es muy fácil, simplemente hay que modificar el código de awesomplete en awesomplete.base.css y eliminar, dentro del selector .awesomplete, el estilo de display: inline-block;

Originalmente está así:

Pero debemos eliminar o comentar ese estilo, así:

Algún experto en CSS debe saber la razón. Tal vez es el comportamiento que el autor de la librería quería, no lo sé, pero así se arregla el error que ocurre al usar Awesomplete con Bootstrap.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

1 comentario en “Problemas con Awesomplete al usar Bootstrap”

Dejar un comentario