2016-05-13 15 views
0

Betrachten Sie das nächste xml:NativeScript zIndex in XML nicht funktioniert?

<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 meinem Verständnis das rote Quadrat sichtbar sein soll, aber es ist hinter dem grünen versteckt. Mache ich etwas falsch?

+0

Ändern Sie einfach die Reihenfolge der gridLayouts, dann wird das letzte Element oben angezeigt. Vielleicht können Sie den Z-Index im Stil/CSS setzen? –

+1

Und beachten Sie, dass der Z-Index derzeit nur auf Android-API-Ebene 21 unterstützt wird. http://docs.nativescript.org/angular/ui/styling.html#supported-css-properties –

Antwort

1

Deklarieren Sie den Z-Index als CSS-Eigenschaft, sodass alle Elemente wie erwartet gerendert werden sollen. Zum Beispiel:

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> 

Diese Lösung für mich gearbeitet - im Auge behalten, dass z-index für Android API 21 unterstützt und oben .

+0

Ok, ich habe meine Frage bearbeitet, um Leute nicht zu verwirren. Die CSS-Eigenschaft funktioniert. Also, ich gebe Ihnen eine Stimme. Was mich interessiert ist, warum JavaScript-Eigenschaft nicht funktioniert. – terreb

+1

Es ist ein Fehler, den ich gerade in https://github.com/NativeScript/NativeScript/issues gemeldet habe und der bereits zur Fehlerbehebung geplant wurde. –

Verwandte Themen