Avoid overlapping text with a NativeScript GridLayout if two horizontally aligned items, name and price

Question

I follow the instructions here to get two horizontally aligned items left and right centered. The problem is now I have item name text that is too long meaning it overlaps with the item price.

This is easily demonstrated by this diagram:

The actual code is:

<ListView for="product in products" @itemTap="onItemTap">
  <v-template>
    <GridLayout rows="auto" columns="*">
      <Label row="0" horizontalAlignment="left" :text="product.title" />
      <Label row="0" horizontalAlignment="right" :text="'$'+product.price" />
    </GridLayout>
  </v-template>
</ListView>

Is GridLayout the way to go, or is there a better way of doing this?

Answer 1

A GridLayout would be the way to go on this one. I use Angular so my binding syntax is just a little different but you want to do something like this:

<GridLayout rows="auto" columns="*,auto">
        <Label col="0" row="0" textWrap="true" horizontalAlignment="left" [text]="item.title"></Label>
        <Label col="1" row="0" horizontalAlignment="right" [text]="'$'+item.price"></Label>
    </GridLayout>

Use columns="*,auto" which will make column 0 take up the remainder of space, and column 1 take up only the space it needs. So the price will use a little space and give the rest of the space to the title. Then you add textWrap="true to the title.

If your GridLayout had multiple rows you would need to give the title Label a rowSpan="2" to have it go into the next row without being cut off.

Hope this helps!