AbsoluteLayout -- how absolute is it? :)


#1

I simply cannot figure out how to make the “thumbs up” button always appear in the middle of the top-right corner. Any help is appreciated! :slight_smile:

Here’s what it looks like now:

Here’s my code:

<GridLayout row="0" col="0" colSpan="2" class="list-group-item" rows="*, *, *, *"
            columns="*, *"
            width="100%">

    <GridLayout row="0" col="0" rowSpan="4" width="150" height="150">
        <Image src="res://profile_image"
               stretch="aspectFill" top="15"></Image>
    </GridLayout>

    <StackLayout row="1" col="1" width="100%" height="50px">

    </StackLayout>

    <StackLayout row="2" col="1" class="list-group-item-content" >
        <Label [text]="_activity.location.address" textWrap="true"></Label>
    </StackLayout>

    <StackLayout row="3" col="1" class="activity-type">
        <Label [text]="_activity.type.name" textWrap="true"></Label>
    </StackLayout>

</GridLayout>

<AbsoluteLayout row="0" col="0" width="90%" colSpan="2" left="10" top="-30">
    <Label class="date" colSpan="2" [text]="_activity.date | date:'shortDate'"></Label>
</AbsoluteLayout>

<AbsoluteLayout row="0" col="1" width="100" >
    <Image (tap)="onJoinActivity()" class="list-group-item-button-in" src="res://thumbs_up"
           stretch="none" top="15"></Image>
</AbsoluteLayout>

#2

If you put a simple working example here https://play.nativescript.org then it will be easier to help you achieve what you want.

ps: I’m not sure why ur nesting every Image, Label … inside StackLayout or GridLayout? in Nativescript drawing every component cost you, especially when you deep nest (You should not rely on the same mentality of using <div> in html ). So you can use row, col, rowSpan, colSpan on the components directly and utilize css to control other aspects e.g. height, width …etc.

here is an awesome video https://www.youtube.com/watch?v=U191esT9_zY by @bradwaynemartin


#3

Out of all of the layouts (excluding the WrapLayout), I would recommend using AbsoluteLayout the least. The actual applicable use-cases for it, are quite narrow.

Anything that deals with alignment (in your case centering your element to another container), the GridLayout or FlexLayout is normally your best bet. The only exception is using verticalAlignment or horizontalAlignment styling properties to align the children content.

In your example, you could have the thumbs-up button on row 0 and horizontal align it to the right, vertical alignment to the top of the container. Use margins/paddings to offset any differences caused by your container.


#4

Good feedback, thanks. To simplify the question – given you have a GridLayout with 4 rows and 2 columns, how can I place an image (or Label) on the top-right corner of that GridLayout so that it looks like it’s overlaying it?


#5

@vbudilov

this tip has been moved to its own post you can find it in the link below


#6

It does help, thanks! :slight_smile: