How to position element at the bottom of Absolute Layout in NativeScript?

user_3165402 0
Viewed 14912

I want to position an element at the bottom of the screen in Absolute Layout in NativeScript.

I have this code:

<AbsoluteLayout>
    <maps:mapView 
        left="0"
        top="0"
        width="100%"
        height="100%"
        latitude="{{ map.latitude }}" 
        longitude="{{ map.longitude }}" 
        zoom="{{ map.zoom }}"
        padding="{{ map.padding }}"  
        mapReady="onMapReady"
        coordinateTapped="onCoordinateTapped"
        markerSelect="onMarkerSelect"
        shapeSelect="onShapeSelect"
        cameraChanged="onMapCameraChanged"/>

    <ScrollView
        left="0"
        top="0"
        width="100%"
        orientation="horizontal">
        <!-- More XML -->
    </ScrollView>

    <StackLayout
        left="0"
        bottom="0"
        width="100%"
        visibility="visible"
        orientation="horizontal"
        style="background-color: red;">

        <Label text="TITLE"></Label>

    </StackLayout>
</AbsoluteLayout>

I figured out that there is no bottom attribute for AbsoluteLayout... Here is the picture of what I want to create:

enter image description here

So how to arange items like in the picture, especially the bottom one?

EDIT: I should note that dimensions of this bottom rectangle may not be always same....

nativescript
6 Answers
user_48080790

here is the best solution wrapper all the elements in an absolutelayout with width and hieght to 100% and maybe add a gridlayout to hold the main content .

        <AbsoluteLayout width='100%' height='100%'>
           <StackLayout width='100%' hieght='100%' left='0' top='0'>
                 //add you structure here

           </StackLayout>
           add your fixed element here

           <image src='add the float item'/>
       </AbsoluteLayout>
user_39944520

It can be done also with GridLayout:

<GridLayout rows="16,*,16" columns="16,*,16" width="100%" backgroundColor="red">
    <GridLayout row="1" col="1" rows="auto, auto, auto" columns="auto" horizontalAlignment="right" verticalAlignment="bottom" backgroundColor="blue">
        <!-- Your content at bottom right corner -->
        <Label row="0" text="Your content" textAlignment="center" textWrap="true"></Label>
        <Label row="1" text="at" textAlignment="center" textWrap="true"></Label>
        <Label row="2" text="bottom right corner" textAlignment="center"></Label>
    </GridLayout>
</GridLayout>
user_6112060

This is the easy way

        <DockLayout backgroundColor="lightgray" stretchLastChild="true">

        <Label text="top" dock="top" height="60" backgroundColor="green">
        </Label>

        <Label text="bottom" dock="bottom" height="60" backgroundColor="yellow"></Label>
        <Label text="center" backgroundColor="red"></Label>
        </DockLayout>

enter image description here

This is what you want!

<DockLayout backgroundColor="lightgray" stretchLastChild="false">

        <Label text="top" dock="top" height="60" backgroundColor="green">
        </Label>

        <Label text="bottom" dock="bottom" height="60" backgroundColor="yellow"></Label>
     
    </DockLayout>

enter image description here

user_60636760
Related