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

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

Answer 2

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.