How can I add a vertical custom card with vertical text align label?

[ppei]

My customer wants to add a vertical textbox (label). How can I do it? See the screenshot below. We want to add HR USE ONLY box.

Thanks in advance.

Pei

[RandyHayes · Accepted solution]

@ppei 

There currently isn't any way to rotate a label.

You might want to consider using an image as a workaround.  

Go into your favorite place and rotate text how you want it (like Word) then snip a snapshot of the text into an image and save it into an image file.  Then import that into your PowerApp and use it where you want through an Image control.

Hope that helps.

[ppei]

Randy ,

Thank you for your prompt reply and good suggestion.

Pei

[ppei]

Randy,

I have added the text image. The problem with this method is that the text will always stay at the top of the screen and I would like it to move with other controls after I scroll down the form. Are there a way that I can do it?

Thanks,

Pei

[RandyHayes]

@ppeiare you putting the image in your Gallery, or in your Form?  Not sure from your picture what you are using.

You should be adding the image to the control that hosts your other controls, not directly on the canvas.  

However, if none of the above apply to your situation, then you can always move the image with the labels.

For example, you have a Title label in the picture - you could always "tie" to that.

   yourNewImage.Y = TitleLabel.Y

   yourNewImage.X = TitleLabel.X - yourNewImage.Width

Really all depends on your layout.

[martinav]

@ppei ,

You can do this with HTML label.  Try this:

in htmlText put in:

"<p style='margin:0;
transform: rotate(-90deg);position: relative;'>
<b>*HR*</b>
</p>
"

The box acts a little weird.  Dragging the size of the box does not do things as you would expect.  I'm still trying to figure out how to fix that with vertical-align.  If you figure that out, please update!

Additionally, if you want to put in variable information, you can use the & to break the HTML code to put in your info.  For instance, if you have a context variable called "Title", you can do this:

"<p style='margin:0;
transform: rotate(-90deg);position: relative;'>
<b>"&Title&"</b>
</p>
"

[RandyHayes]

@martinav 

This post is a bit old and since then there are some even better solutions...

One would be to put an image on the screen and set the image property to:

"data:image/svg+xml,"
&
EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg'>
    <text x='10' y='30' fill='red' font-size='30pt' font-weight='bold' transform='rotate(270 70,30)'>Text</text>
</svg>")

Again, you can replace "Text" with any other values, variables, references or what ever else you might need. 

[ppei]

@martinav Great idea! I appreciate your suggestions. I have used the image solution, but I'll definitely try your solution in future. Thank you for your reply!