In Nativescript how can I achieve a vertically aligned label text using StackLayout

Question

I need something like this:

But this is what I have at the moment:

.rotate {
transform: rotate(-90deg);
font-size: 16px;
color: #FFFFFF; 
}

This is my code:

<StackLayout backgroundColor="#3C414B" width="12%" height="100%" horizontalAlignment="center" verticalAlignment="center" (tap)="openDrawer('Right')">
   <StackLayout class="rotate" orientation="horizontal">
      <Label class="fa" style="margin-right: 10px" text="&#xf067;"></Label>
      <Label width="100%" class="" text="New Category" textwrap="false"></Label>
   </StackLayout>
</StackLayout>

Answer 1

You will have to set the height explicitly to the width of the element, transform doesn't take care of that by default.

Or you may even consider using an image, here is a related thread from Forums.

Answer 2

It looks like you rotate inner <StackLayout class="rotate" ...>, but it still get width limit of outer <StackLayout width="12%" ...> Try so:

<StackLayout class="rotate" backgroundColor="#3C414B" width="100%" height="12%" horizontalAlignment="center" verticalAlignment="center">
            <StackLayout orientation="horizontal">
                <Label class="fa" style="margin-right: 10px" text="&#xf067;"></Label>
                <Label text="New Category" textwrap="false" backgroundColor="yellow"></Label>
            </StackLayout>
        </StackLayout>

Or try to find solution with other layout type. For example, AbsoluteLayout