3

Estoy intentando que un <input> y una lista tengan un mismo tamaño dentro de una página.

Para controlarlo, tengo ambos valores al 100%, pero al generar la lista de resultados, este es mas grande.

El <input> lo tengo dentro de un <div> por lo que cuando genero la lista, esta queda fuera y entiendo que por eso no me coge el tamaño correcto.

Estos son los valores que tengo en cada uno de los elementos:

.form-control {
  width: 100%;

.dropdown-menu {
  min-width: 100%;

Hay forma de poder controlar los tamaños en este caso? Dejo subido el <input> para que se pueda ver el contenido CSS y una imagen con lo que sucede.

introducir la descripción de la imagen aquí

https://139.162.206.138/bootstrap/autocomplete_v2/

gracias!

3 respuestas 3

3

El plugin, lo que hace al generar el listado del autocomplete es crearlo con el tamaño en píxeles que tenga su padre, en nuestro caso el col-md-8. ¿Qué es lo que ocurre? Que Bootstrap da a sus col un padding a la derecha y a la izquierda y este se suma a lo que ocupa el <div> en cuestión. Así que cuando se genera el listado este mide tantos píxeles de más como tenga en padding su padre.

Una manera de solucionarlo es quitándole ese padding al col-md-8.

CSS

.d-flex .col-md-8 {
    padding: 0px;
}
1
  • muchas gracias!
    – Guif If
    el 13 sep. 2019 a las 10:59
0

El problema lo estas teniendo porque le estas añadiendo un padding al input

introducir la descripción de la imagen aquí

Quitaselo y prueba de nuevo.

1
  • he comentado las lineas //padding: 10px 16px; pero sigue igual
    – Guif If
    el 13 sep. 2019 a las 10:56
0

Puedes suprimir el tamaño sobrante al dropdown-menu restandoselo a la anchura del elemento. En este caso tiene 30px de mas. por tanto podrias probar con:

.dropdown-menu{
  width: calc(100% - 30px);
}

Espero que te sirva, saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.