CODEWITHSUNDEEP
nativescript
terreb
terreb

Reputation: 1467

NativeScript zIndex set in XML not working?

Consider the next xml:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" >
  <!-- UI Decalration -->
    <AbsoluteLayout>
      <GridLayout zIndex="99" height="100" width="100" backgroundColor="red"></GridLayout>
      <GridLayout zIndex="1" height="200" width="200" backgroundColor="green"></GridLayout>
    </AbsoluteLayout>
</Page>

In my understanding the red square should be visible, but it's hidden behind the green one. Am I doing something wrong?

Upvotes: 2

Views: 2676

Answers (2)

stevenspiel
stevenspiel

Reputation: 5999

I got it working by using gridlayout and then repeating the same row number. The order of the items then determines the z-index playground demo:

<GridLayout rows="*, *, *" columns="*">
    <GridLayout row="0" col="0" height="300" backgroundColor="black" />
    <GridLayout row="1" col="0" height="300" backgroundColor="red" />
    <GridLayout row="2" col="0" height="300" backgroundColor="green" />
    <GridLayout row="0" col="0" height="100" backgroundColor="blue" margin="100" /> <!-- displays on top of the first row 0 -->
</GridLayout>

Upvotes: 1

Nick Iliev
Nick Iliev

Reputation: 9670

Declare z-index as CSS property so all elements should be rendered as espected. For example :

page.css

.lower-grid {
    z-index: 1;
}
.upper-grid {
    z-index: 99;
}

page.xml

  <AbsoluteLayout>
      <GridLayout class="upper-grid" height="100" width="100" backgroundColor="red" />
      <GridLayout class="lower-grid" height="200" width="200" backgroundColor="green" />
  </AbsoluteLayout>

This solution worked out for me - keep in mind that z-index is supported for Android API 21 and above.

Upvotes: 4

Related Questions