Como solucionar que el select nativo no se abra en algunas versiones de Android

select oen

Estilo del select con JqueryMobile

Una vez teníamos la aplicación en funcionamiento y en producción vimos que al convertir la página de Nuevo Usuario en un PopUp el combo o select nativo de HTML dejaba de abrirse en algunas versiones de Android con jQuery Mobile. La versiones afectadas eran las 2.3.X es decir, Android Gingerbread.

Leyendo información por internet llegamos a la conclusión que era posible que la disposición de la página podría producir esta anomalía. Después de mucho buscar soluciones para ello dimos con la clave, es necesario poner en la etiqueta “select” el atributo “data-native-menu=”false”“. Con ello se deja de abrir el componente nativo del dispositivo, pero al menos se abre otro muy bonito con los estilos de jQuery Mobile.

<div data-role="popup" id="newuser" data-transition="pop">
     <div data-role="header"><h4>InfoBolsa CyL</h4></div>
     <div data-role="content">
          <div id="newusera">&nbsp;</div>
          <div id="newuserb">
             <div data-type="horizontal">
                <select data-native-menu="false" required name="optionBolsa">
                   <option>Seleccione cuerpo</option>
                   <option value="970">Cuerpo de maestros</option>
                   <option value="100">Otros cuerpos</option>
                </select>
                <div><input required size="10" name="nif" placeholder="Introduce el NIF" type="text"></div>
                <div><a data-role="button" id="enviar" href="page2" >Enviar</a></div>
             </div>
          </div>
          <div id="newuserc">&nbsp;</div>
      </div>
</div>

Es muy importante que la opción por defecto no tenga valor ninguno. Además si desea ocultar la opción por defecto basta con añadir el siguiente estilo a nuestra css.

       .ui-selectmenu .ui-header{display:none}
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: