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;
}
#borderContainer {
  min-height: 600px;
}

Príklad: Zápis vlastnosti height pre Border Container.

1
2
3
#borderContainer {
  height: 600px;
}
#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%;
}
#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%;
}
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%;
}
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%;
}
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.

Ako zobraziť Border Container na celú obrazovku (Dojo)

Záver

Komentáre

Pridať komentár