Why does the GridLayout cover the whole screen?

Question

I have the following HTML code:

<GridLayout>
  <GridLayout #background class="background">
  </GridLayout>

  <StackLayout #initialContainer class="initial-container">
    <Image src="res://logo_login">
    </Image>
    ....
    ....
  </StackLayout>
</GridLayout>

My question is about the GridLayout with the background class.

This is the CSS for the class:

.background {
  background-image: url("res://apple");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

Apparently it's the actual background (the orange background here, not the logo!).

Question I don't understand why the GridLayout covers the whole screen. And even if it does, I was expecting the StackLayout to be after the GridLayout. I already know that background-size:cover covers the whole space, but why does the GridLayout cover the whole screen as well? And why does the logo and title display as if they are absolutely positioned when they are not in my CSS?

share your inflated rows or columns layout/ – Hemant Parmar Nov 14 '17 at 09:14 — Hemant Parmar, Nov 14 '17 at 09:14

score 3 · Accepted Answer · answered Nov 14 '17 at 09:14

3

Your outer layout is a GridLayout, if you dont specify rows and columns, any layout or item inside the layout will be stacked on top of each other in the top-left-most grid cell, layered in order that they are in the html. To get around this, swap your outer layout to a StackLayout

answered Nov 14 '17 at 09:14

mast3rd3mon

8,229
2
22
46

There is no problem that I want to solve. I just want to understand how come that background takes the 100% and how come those logo+title are on top of it - without me to write it in code – Royi Namir Nov 14 '17 at 09:15
Because without specifying rows and columns on your outer layout, everything within the grid layout will be stacked on top of each other, the lowest items will be on top – mast3rd3mon Nov 14 '17 at 09:16
Thanks !. sorry ( but i'm a beginner in the field) - where is the docs that says what you've just told me ? – Royi Namir Nov 14 '17 at 09:16
i dont believe there are any docs which say that, but after observations made by nativescripters (Dave Coffin's blogpost) it was found that they stack – mast3rd3mon Nov 14 '17 at 09:18
Searched [here](https://www.telerik.com/blogs/meet-dave-coffin-developer-expert-for-nativescript) = but didn't find any articles. – Royi Namir Nov 14 '17 at 09:29
you wont, its on the nativescript blog – mast3rd3mon Nov 14 '17 at 09:32
BTW when you say : _layered in order that they are in the html_ - But will they be centered vert && horz && 100% fill each ? ? – Royi Namir Nov 14 '17 at 11:16
that i am aware of, yes. unless the size is explicitly defined – mast3rd3mon Nov 14 '17 at 11:23

Why does the GridLayout cover the whole screen?

1 Answers1