I have HTML I want to give border-bottom property to the <Label> element which is a child of <StackLayout>.

My problem is the border-bottom is taking full width like a div in the web. I want this Label element to be inline like a span so that it's width should not be more than its content width.

    <StackLayout *ngIf="!places.length">
       <Label (tap)="onSearch()" class="fo-20 m-t-20 opensans-bold text-center p-b-5"
         borderBottomColor="#F16051" borderBottomWidth="2" text="View All Activities"></Label>
    </StackLayout>

Below is the layout I'm getting now. But I don't want that orange line to be end to end. Instead its width should always be equal to the text present inside that Label.

enter image description here

3 Answers

0
Manoj On Best Solutions

Try setting horizontalAlignment on Label to center

<Label horizontalAlignment="center" ... 
0
Tiago A. On

Add horizontalAlignment="center" to the label. This will center the component, making it only the size it needs to have.

Example playground: https://play.nativescript.org/?template=play-vue&id=8kZUFY

1
preethi R On

Instead of StackLayout, you can have FlexboxLayout with the justifyContent="center".


<FlexboxLayout justifyContent="center" *ngIf="!places.length">
  <Label (tap)="onSearch()" class="fo-20 m-t-20 opensans-bold text-center p-b- 
   5" borderBottomColor="#F16051" borderBottomWidth="2" text="View All 
   Activities"> . 
  </Label>
</FlexboxLayout>