×
COOKIES
Prezeraním tejto stránky dochádza k spracovaniu cookies. Spracovaniu cookies zabránite v nastaveniach internetového prehliadača alebo nezobrazovaním tejto stránky v internetovom prehliadači.
Informačný web Mateja Lednára
Vytvárame riešenia

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.
Autor: Matej Lednár
Dátum: 19.5.2013
Kategória: Dojo
Značky: dijit/layout/bordercontainer, dojo, programovanie, css, width, height, full screen, percentage
Dojo,dijit/layout/BorderContainer,dojo,programovanie,CSS,width,height,full screen,percentage
Žiadna časť tohto článku nesmie byť reprodukovaná bez uvedenia autora a URL na túto stránku.
Viac informácií nájdete v sekcii O projekte.

Komentáre

Článok neobsahuje zatiaľ žiadne komentáre.

Pridať komentár

Meno (povinné)
Web
Správa (povinné)
Odoslať
Od najnovších