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).
- Bootstrap de Twitter: no se cambia el tamaño de la barra de navegación en el cambio de orientación (solo con el navegador de acciones de Android)
- Forzar la ocultación de la barra de direcciones en Chrome en Android
- Twitter Bootstrap no funciona en Android WebView
- Tipo de entrada = número no es posible insertar números negativos en el teléfono móvil
- ¿Hay herramientas de interfaz de usuario personalizadas para Android?
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í
- Twitter Bootstrap desplegable en ipad y android no funciona incluso con el hack
- ¿Por qué este CSS no funciona para Chrome en Android pero funciona en cualquier otro sitio?
- Dropdowns de Bootstrap de Twitter Unclickable en tabletas
- ¿Qué UI usar para Cordova Android / iPhone desarrollo de aplicaciones
- Twitter Bootstrap modal en dispositivos móviles
- Respuesta de Bootstrap en dispositivos móviles
- Twitter bootstrap tema de Holo
- Bootstrap navbar sensible a la lista desplegable no responde al tacto
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í
- La base de datos SQLite no funciona en Android 4.4
- Señal fatal 11 (SIGSEGV) cuando el GC se ejecuta después de llamar a KeyChain.getPrivateKey