web

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í:

See the gist on github.

Pero debemos eliminar o comentar ese estilo, así:

See the gist on github.

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.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Ver comentarios

  • otro problema que encontre y no consegui resolver es que si buscas numeros y empieza por 0, cosa tipica en codigos postales.. el '0' pasa de el.
    no tendras la solucion por ahi?

Entradas recientes

Monitorear cola de impresión en Windows

En este artículo te voy a enseñar a monitorear la cola de impresión de una…

2 días hace

Solución: Unable to extract uploader id con youtube-dl

En mi blog te he enseñado a usar youtube-dl para descargar vídeos con permiso del…

6 días hace

Enviar foto a Telegram usando cURL y Bot

Siguiendo con los tutoriales que consumen la API de los Bots de Telegram con cURL…

6 días hace

cURL y Telegram: enviar mensaje a Bot

En un post previo te enseñé a enviar un mensaje en nombre de un Bot…

6 días hace

Impresora térmica con Telegram usando Bot

En este artículo te voy a mostrar una guía para imprimir en una impresora térmica…

6 días hace

Imprimir PDF con Bot de Telegram

La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…

1 semana hace

Esta web usa cookies.