Ako zobraziť Border Container na celú obrazovku (Dojo)
Práca s dijitom Border Container z frameworku Dojo môže byť pre začínajúceho programátora zo začiatku náročná. Prvý problém, s ktorým sa je možné pri Border Containeri stretnúť, je jeho nezobrazenie. Táto chyba sa žiaľ nedá oddebugovať, keďže ide o problém súvisiaci s jazykom CSS. Ďalším problémom je umiestnenie Border Container na celú obrazovku.Ako prvé sa zameriame na odstránenie problému so zobrazením. Pre zobrazenie Border Containera je potrebné definovať jednu z vlastností height alebo min-height. V tomto prípade nesmie byť veľkosť udávaná v percentách. V opačnom prípade sa problém so zobrazením Border Containera pri aktuálnych vlastnostiach CSS neodstráni.Príklad: Zápis vlastnosti min-height pre Border Container.
1
2
3
#borderContainer {
min-height: 600px;
}
Príklad: Zápis vlastnosti height pre Border Container.
1
2
3
#borderContainer {
height: 600px;
}
Attribút id s hodnotou borderContainer musí byť umiestnený v elemente so zápisom data-dojo-type="dijit/layout/BorderContainer". Ak chce používateľ pracovať s jednotkou %, musí Border Container umiestniť na absolútnu pozíciu.Príklad: Použitie jednotky % pre rozmery Border Containera.
1
2
3
4
5
#borderContainer {
position : absolute;
width : 60%;
height: 60%;
}
Ďalší postup demonštruje ako zobraziť Border Container na celú obrazovku. Ako prvé je potrebné resetovať základné odsadenia elementu <body>. Následne je potrebné resetovať odsadenia aj samotného Border Containera.Príklad: Zobrazenie Border Containera na celú obrazovku.
1
2
3
4
5
6
7
8
9
10
11
12
13
body {
margin : 0;
padding : 0;
}
#borderContainer {
margin : 0;
padding : 0;
border : 0;
outline : 0;
position: absolute;
width: 100%;
height: 100%;
}
Ak chceme vytvoriť mierne odsadenie od okrajov obrazovky, je možné definovať nasledujúce pravidlá.Príklad: Odsadenie Border Containera od okrajov obrazovky.
1
2
3
4
5
6
7
8
9
10
11
12
13
body {
margin : 0;
padding : 0;
}
#borderContainer {
margin : 1%;
padding : 0;
border : 0;
outline : 0;
position: absolute;
width: 98%;
height: 98%;
}
Alebo ponechať pôvodné odsadenie Border Containera.Príklad: Pôvodné odsadenie Border Containera od okrajov obrazovky.
1
2
3
4
5
6
7
8
9
body {
margin : 0;
padding : 0;
}
#borderContainer {
position: absolute;
width: 100%;
height: 100%;
}
Záver
Ako vidieť práca s Border Containerom nemusí byť vždy jednoduchá. Verím, že vám uvedené tipy a postupy pomôžu pri práci s týmto veľmi často používaným komponentom.19.5.2013, Matej LednárCategory: DojoDojo,dijit/layout/BorderContainer,dojo,programovanie,CSS,width,height,full screen,percentageNo part of this article may be reproduced without mention of the author and URL to this website.For more information, see the About section.
