Bootstrap 2.3 Problemas de menú plegables en Android Mobile

He estado investigando por un tiempo ahora y no pude encontrar una solución para esto ni ninguna cuestión relacionada con mi problema, lo siento si esto ya se había preguntado antes.

Estoy desarrollando un sitio web con Twitter Bootstrap 2.3 y tengo un problema con el componente de menú plegable en Android (probado con Samsung Galaxy s4 con Android 4.2 en la última versión de Chrome).

Cuando "desacople" el menú por primera vez, los componentes funcionan como se esperaba, pero si lo colapso y luego lo "desacople" nuevamente, los enlaces aparecen como "ocultos". Todavía puedo tocarlos y los enlaces funcionan como se esperaba. Pero nada se muestra, como si fueran transparentes o algo así.

¿Alguien ha experimentado un problema como éste? Cualquier ayuda sería appreciatted.

He encontrado una solución a esto. Es un poco áspero aunque.

Este fue mi marcado html:

<div id="navContainer" class="nav-collapse navbar-responsive-collapse in collapse" style="height: auto;"> <ul id="headerNav" class="nav green"> <li class="active"><a class="headerLink" href="/es">El Pueblo</a></li> <li><a class="headerLink" href="#">Cómo llegar</a></li> <li><a class="headerLink" href="/es/noticias">Noticias</a></li> <li class="dropdown"> <a class="dropdown-toggle" id="drop1" role="button" data-toggle="dropdown" href="#">Turismo <b class="caret"></b></a> <ul id="menu1" class="dropdown-menu green" role="menu" aria-labelledby="drop1"> <li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/historia">Historia</a></li> <li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="#">Actividades</a></li> <li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/info">Info General</a></li> <li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/paseos">Paseos</a></li> <li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="#">Imágenes</a></li> </ul> </li> <li><a class="headerLink" href="/es/mapas">Mapa Interactivo!</a></li> <li><a class="headerLink" href="#">Contacto</a></li> <li class="dropdown"> <a class="dropdown-toggle" id="drop3" role="button" data-toggle="dropdown" href="#">Idioma <b class="caret"></b></a> <ul id="menu3" class="dropdown-menu green" role="menu" aria-labelledby="drop3"> <li role="presentation"><a role="menuitem" tabindex="-1" href="/es/">Español</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="/en/">English</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="/de/">Deutsch</a></li> </ul> </li> </ul> </div> 

Esta es la solución que funcionó para mí:

 .nav-collapse { -webkit-transform: none !important; z-index: 1 !important; } 

Este problema sólo estaba presente en Android con Chrome. En IOS la cuestión no estaba allí

He encontrado una solución a esto. Es un poco rought thouth.

Este fue mi marcado html:

 <div id="navContainer" class="nav-collapse navbar-responsive-collapse in collapse" style="height: auto;"> <ul id="headerNav" class="nav green"> <li class="active"><a class="headerLink" href="/es">El Pueblo</a></li> <li><a class="headerLink" href="#">Cómo llegar</a></li> <li><a class="headerLink" href="/es/noticias">Noticias</a></li> <li class="dropdown"> <a class="dropdown-toggle" id="drop1" role="button" data-toggle="dropdown" href="#">Turismo <b class="caret"></b></a> <ul id="menu1" class="dropdown-menu green" role="menu" aria-labelledby="drop1"> <li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/historia">Historia</a></li> <li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="#">Actividades</a></li> <li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/info">Info General</a></li> <li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="/es/paseos">Paseos</a></li> <li role="presentation"><a class="headerLink" role="menuitem" tabindex="-1" href="#">Imágenes</a></li> </ul> </li> <li><a class="headerLink" href="/es/mapas">Mapa Interactivo!</a></li> <li><a class="headerLink" href="#">Contacto</a></li> <li class="dropdown"> <a class="dropdown-toggle" id="drop3" role="button" data-toggle="dropdown" href="#">Idioma <b class="caret"></b></a> <ul id="menu3" class="dropdown-menu green" role="menu" aria-labelledby="drop3"> <li role="presentation"><a role="menuitem" tabindex="-1" href="/es/">Español</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="/en/">English</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="/de/">Deutsch</a></li> </ul> </li> </ul> </div> 

Esta es la solución que funcionó para mí:

 .nav-collapse { -webkit-transform: none !important; z-index: 1 !important; } 

Este problema sólo estaba presente en Android con Chrome. En IOS la cuestión no estaba allí

  • Algunos de los glyphicons Bootstrap3 no se muestran correctamente en la vista previa de phonegap android
  • Css-fix para la pantalla de saltar hacia arriba y hacia abajo cuando se desplaza en los dispositivos Android
  • Diferentes diseños de cuadrícula para retrato y paisaje en bootstrap
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.