Cannot vertically align Label inside GridLayout in NativeScript

Question

I want this star (favorite) icon to be on the bottom right

Here's the full markup (Vue.js):

  <Page actionBarHidden="true">
    <GridLayout rows="*, auto">
      <GridLayout row="0" class="page" rows="*">
        <ListView row="0" for="(place, index) in places" @itemTap="onItemTap($event)">
          <v-template>
            <GridLayout columns="20, auto, *, *" rows="auto" class="place">
              <StackLayout col="0" row="0"  class="index" horizontalAlignment="center" verticalAlignment="center">
                <label :text="index + 1" textAlignment="center" horizontalAlignment="center"></label>
              </StackLayout>
              <StackLayout col="1" row="0">
                <Image src="~/images/layer20.png" stretch="fitAspect" class="thumb img-circle avatar"></Image>
              </StackLayout>
              <StackLayout col="2" row="0" orientation="vertical">
                <label class="placeName" :text="place.name"></label>
                <label class="type" :text="place.type"></label>
                <label class="description" :text="place.description" textWrap="true"></label>
              </StackLayout>
              <GridLayout col="3" row="0" rows="auto, auto" class="lastColumn">
                <Label row="0" class="distance" :text="place.distanceMeters+'m'" verticalAlignment="top"></Label>
                <Label row="1" v-if="place.favorite" :text="'fa-star' | fonticon" class="fa favorite" verticalAlignment="bottom"></Label>
              </GridLayout>
            </GridLayout>
          </v-template>
        </ListView>
      </GridLayout>
      <BottomNavigation row="1" :navItems="this.bottomNavItems"></BottomNavigation>
    </GridLayout>
  </Page>

This is the markup for the block with the label that shows a Star (Favorite)

<GridLayout col="3" row="0" rows="auto, auto" class="lastColumn">
  <Label row="0" class="distance" :text="place.distanceMeters+'m'" verticalAlignment="top"></Label>
  <Label row="1" v-if="place.favorite" :text="'fa-star' | fonticon" class="fa favorite" verticalAlignment="bottom"></Label>
</GridLayout>

I've tried:

specifying explicit columns
wrapping the Label in a StackLayout
specifying explicit height of 100% to the GridLayout
specifying explicit height to the Label
Using a middle empty text label with a GridLayout rows="auto, *, auto"
recompiling everything, and re-running everything

The label just doesn't seem to move down, nothing, nada. I'm working on a Mac with the iOS simulator running. Can't test on android simulator because I have some package namespace issues that won't compile on android at the moment.

UPDATE 16/09/2019

Playground of the issue: https://play.nativescript.org/?template=play-vue&id=E4T5zO

Manoj Manoj · Accepted Answer · 2019-09-13T18:15:28

The parent of favorite label (GridView) itself not expanding to whole list view, hence vertical alignment doesn't take it to bottom corner.

Try,

<GridLayout col="3" row="0" rows="*" class="lastColumn">
  <Label class="distance" :text="place.distanceMeters+'m'" verticalAlignment="top"></Label>
  <Label v-if="place.favorite" :text="'fa-star' | fonticon" class="fa favorite" verticalAlignment="bottom"></Label>
</GridLayout>

Cannot vertically align Label inside GridLayout in NativeScript

1 Answers