CODEWITHSUNDEEP
androidnativescriptgrid-layout
Royi Namir
Royi Namir

Reputation: 148624

Why does the GridLayout cover the whole screen?

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!).

enter image description here

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?

Upvotes: 0

Views: 239

Answers (1)

mast3rd3mon
mast3rd3mon

Reputation: 8835

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

Upvotes: 3

Related Questions