Pokud máte problémy se SELECTy na starších Androidech, konkrétně to, že se SELECTy nechtějí otevírat a zobrazovat nativní výběr možností, je to způsobeno chybou ve staré verzi Chromium (předinstalovaná aplikace Internet).
Změna Viewport
Chyba se projevuje při určitém nastavení META tagu viewport; problémové hodnoty jsou user-scalable a width/height nastavené na aktuální hodnotu zařízení (např. width=device-width), ale možná ještě další.
Pokud na konkrétním viewport nastavení netrváte, stačí změnit problémovou hodnotu – např. pro Android 2.x povolit zoomování (user-scalable=yes).
Pokud na viewport trváte (a nebo to vaši chybu neodstranilo), budete muset zjistit, které konkrétní prvky způsobují kolize a rozbíjí selecty.
Absolutní stránka
Jedním z důvodů může být to, že máte celou stránku umístěnou v DIVu, který je pak absolutně pozicovaný.
To se často projevuje u Frameworků jako je JQM (jQuery Mobile), které tímto způsobem přepínají jednotlivé stránky. Pak je potřeba buď použít daný framework k vytvoření vlastního selectu (např. custom menu v JQM), vypnout důvod absolutního pozicování (např. animace přechodu na jinou stránku) a nebo framework obejít a pomocí vlastního CSS absolutní pozicování vypnout a požadovaného vzhledu stránky dosáhnout jinak. Např.:
.ui-page { display: none }
.ui-page.ui-page-active {
display: block; position: static
}Jiným důvodem absolutního pozicování může být sidebar nebo toolbar, které mají vyjíždět z okraje stránky (tím, že se posune samotná stránka a odhalí tak skrytý sidebar nebo toolbar). Pak je opět potřeba změnit způsob chování takového prvku např. tím, že v klidovém stavu bude absolutní pozicování vypnuto.
/* příklad stylu pro otevření menu
od levého okraje */
.menu { width: 20%; }
.page {
position: absolute;
left: 0; top: 0; width: 100%;
}
body.menu-opened .page {
margin-left: 20%;
/* tady by ještě měla být animace,
kvůli které to celé je */
}
/* oprava pro Android 2.x (třídu android2
je potřeba doplnit v PHP/JS/... */
html.android2 .menu { display: none; }
html.android2 .page { position: static; }
html.android2 body.menu-opened .menu {
display: block;
}
html.android2 body.menu-opened .page {
position: absolute;
}Prázdné fixní elementy
Další možností jsou fixně umístěné prvky, které obsahují další absolutně umístěné prvky, které pak neobsahují žádný další (viditelný) text. Např.:
<div id="toolbar" style="position: fixed; top: 0;
width: 100%;">
Toto je můj toolbar s obrázkem napravo
<span id="image" style="display: block;
position: absolute; right: 0;
width: 1em; height: 1em;
background-image: url('...');">
</span>
</div>
Uvedený toolbar obsahuje doprava zarovnaný obrázek, který sice obsahuje mezi tagy mezeru, ale ta je prohlížečem odstraněna a pak daný SPAN zůstává prázdný.
Oprava je pak vcelku jednoduchá pomocí zapsání (pro uživatele) neviditelné tvrdé mezery:
<div id="toolbar" style="position: fixed; top: 0;
width: 100%;">
Toto je můj toolbar s obrázkem napravo
<span id="image" style="display: block;
position: absolute; right: 0;
width: 1em; height: 1em;
background-image: url('...');">
</span>
</div>
Absolutní SELECT
Ještě může být důvodem to, že vlastní SELECT je absolutně pozicovaný v rámci dalších prvků a Android pak chybně vypočte jeho z-index a jeho událost onclick pak pohlcuje jiný prvek.
Pro opravu stačí nastavit SELECTům nějaký hodně vysoký z-index, aby se dostaly nad všechny ostatní prvky.
select { z-index: 1000; }S vlastní hodnotou z-indexu bude potřeba trochu experimentovat, protože s vyšší hodnotou se zlepšuje šance na opravu chyby, ale na druhou stranu roste riziko, že přesáhnete maximum (které je blíže nespecifikované) a prohlížeč ji bude prostě ignorovat.