×
Creating solutions

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;
}
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>
Obrázok: Nesprávne spracovanie atribútu class.
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;
}
Obrázok: Správne spracovanie atribútu class.
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á.


Dojo,dijit/form/Select,width,css,deklaratívny zápis
No part of this article may be reproduced without mention of the author and URL to this website.
For more information, see the About section.

Comments

Article has no comments.

Add a comment

Name (required)
Website
Message (required)
Submit
From latest