Add z-index to the public API

The zIndex property only exists in https://github.com/NativeScript/NativeScript/blob/master/ui/styling/style.d.ts

but not in
https://github.com/NativeScript/NativeScript/blob/master/ui/styling/styling.d.ts

where it could be found by the TypeScript compiler and tools.

Is it meant to be private API thing?

@zeroum

@zeroum

Thank you for noticing this issue - indeed the zIndex should be exposed in both files.

Is it planned to add z-index support to all API levels that are supported by Nativescript? For example API 19?

@spstratis

@spstratis for API levels below 21 you can use as a workaround an absolute layout and order your elements - the last one will be placed on top.
For example:

    <AbsoluteLayout>
        <GridLayout width="200" height="200" backgroundColor="red" id="mr-red"/>
        <GridLayout width="100" height="100" backgroundColor="green" id="mr-green"/>
        <GridLayout width="50" height="50" backgroundColor="blue" id="mr-blue"/>
    </AbsoluteLayout>

If you want to dynamically change the order of an element you can again use the native API method bringToFront()

For example:
in your page.xml (three blocks but the smallest (mr-blue) will be hidden behind the green one)

    <AbsoluteLayout>
        <GridLayout width="200" height="200" backgroundColor="red" id="mr-red"/>
        <GridLayout width="50" height="50" backgroundColor="blue" id="mr-blue"/>
        <GridLayout width="100" height="100" backgroundColor="green" id="mr-green"/>
    </AbsoluteLayout>

in your page.js

var blue = page.getViewById("mr-blue");
blue.android.bringToFront();

This will bring mr-blue to the front

@NickIliev

@NickIliev Thanks, I will try this out and see if it works. In my case everything is within a GridLayout.

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Navigation Menu

Repository navigation

Add z-index to the public API #2151

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Add z-index to the public API #2151

Description

Activity

NickIliev commented on May 20, 2016

spstratis commented on Jun 23, 2016

NickIliev commented on Jun 23, 2016

spstratis commented on Jun 26, 2016

lock commented on Aug 29, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions