1 votos

CSS - Selects responsive

Hola, estoy usando un select de ancho 100%, pero cuando la pantalla es demasiado pequeña para mostrar el contenido de un option este se corta... ¿alguna forma de hacerlo sin bootstrap o similares?

1voto

Moisés AC Puntos 530

Hola lo probé en escritorio. Cuando lo tengo todo casi terminado ya conecto un dispositivo con android, pruebo otros navegadores, etc, para hacer correcciones. Si se me ha ocurrido que en el móvil podía funcionar. Con lo de scroll ¿te refieres a un scroll horizontal? por que al no caber el contenido puede darse esta situación nada deseable...

0 votos

Yo creo que no habrá problema cuando lo pruebes en movil por lo que te digo que sale de forma distinta el select, a veces es un fastidio pero en tu caso te vendrá bien xD. Si con lo de scroll me refería a scroll horizontal (lateral)

0voto

aEscarcha Puntos 220

Puedes hacer que tu select deje de ocupar el 100% cuando la pantalla sea mas pequeña de lo que quieres mediante media queries

@media screen and (max-width: 1080px) {
    #tuselect {
        width: 80%;
    }
}

De todas formas no entiendo por que se te corta, ¿tienes el tamaño del body o de algún contenedor fijo? Si no no debería salirse de la pantalla.

1 votos

Hola. Es un diseño movile-first, por lo que no lleva media-queries para este tamaño. El select tiene un with: 100% sobre su contenedor padre, que va a tener si o si uno de ancho fijo ya que de forma predeterminada uso un div.wrap que engloba toda la página, con cierto margen a los lados que se lo doy con un ancho porcentual y un auto-centrado.

0 votos

Siempre y cuando no tengas que hacer scroll no deberías tener problemas, ¿estás haciendo las pruebas desde un móvil o desde escritorio? Porque probar reduciendo el tamaño del navegador en el ordenador no es fiable, ya que Android e iOS muestran los selects de forma distinta a los desplegables de escritorio.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: