Ako dijitu Select definovať šírku prostredníctvom triedy (Dojo)

Deklaratívny zápis modulu dijit/form/Select nie je vždy tak jednoduchý, ako na prvý pohľad vyzerá. Príkladom je definovanie šírky dijitu prostredníctvom HTML atribútu class. Aj keď definovanie šírky prostredníctvom HTML atribútu style prebehne úspešne, výsledok pri použití atribútu class nie je vôbec taký, aký by sa očakával. Dôvodom je nesprávne nastavenie šírky elementu zabezpečujúceho zobrazenie ponuky (šípka vpravo).

Nasledujúci príklad demonštruje nesprávne formátovanie dijitu Select.

Príklad: Zápis do elementu <style>.

1
2
3
.select-width {
    width : 200px;
}
.select-width {
    width : 200px;
}

Príklad: Zápis do elementu <body>.

1
2
3
4
5
6
7
8
9
10
11
12
13
<select style="width :200px;" name="selectCar1" 
  data-dojo-type="dijit/form/Select">
    <option value="bmw">BMW</option>
    <option value="audi" selected="selected">Audi</option>
    <option value="mercedes">Mercedes</option>
</select>
<br>
<select class="select-width" name="selectCar2" 
  data-dojo-type="dijit/form/Select">
    <option value="bmw">BMW</option>
    <option value="audi" selected="selected">Audi</option>
    <option value="mercedes">Mercedes</option>
</select>  
<select style="width :200px;" name="selectCar1" 
  data-dojo-type="dijit/form/Select">
    <option value="bmw">BMW</option>
    <option value="audi" selected="selected">Audi</option>
    <option value="mercedes">Mercedes</option>
</select>
<br>
<select class="select-width" name="selectCar2" 
  data-dojo-type="dijit/form/Select">
    <option value="bmw">BMW</option>
    <option value="audi" selected="selected">Audi</option>
    <option value="mercedes">Mercedes</option>
</select>  

Obrázok: Nesprávne spracovanie atribútu class.

Pre správne zobrazenie dijitu Select je potrebné definovať selektoru dijitArrowButtonContainer šírku 16px. V opačnom prípade nastane formátovanie aj elementu so selektorom dijitArrowButtonContainer. Nasledujúci príklad demonštruje správny zápis v elemente <style>.

Príklad: Zápis do elementu <style>.

1
2
3
4
5
6
7
.select-width {
    width : 200px;
}
 
.select-width .dijitArrowButtonContainer {
    width : 16px;
}
.select-width {
    width : 200px;
}
 
.select-width .dijitArrowButtonContainer {
    width : 16px;
}

Obrázok: Správne spracovanie atribútu class.

Záver

Ako vidieť, widgety Dojo Toolkit majú ešte stále množstvo bugov aj napriek tomu, že veľká časť z nich už bola opravená.

Ako dijitu Select definovať šírku prostredníctvom triedy (Dojo)

Záver

Komentáre

Pridať komentár