Nefunkční SELECTy na Android 2.x

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('...');">
    &nbsp;</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.

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *