cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
ppei
Resolver I
Resolver I

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

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.

 

AddVerticalCard.JPG

 

Thanks in advance.

Pei

1 ACCEPTED SOLUTION

Accepted Solutions
RandyHayes
Super User III
Super User III

@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.

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

Really want to show your appreciation? Buy Me A Cup Of Coffee!

View solution in original post

7 REPLIES 7
RandyHayes
Super User III
Super User III

@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.

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

Really want to show your appreciation? Buy Me A Cup Of Coffee!

View solution in original post

Randy ,

 

Thank you for your prompt reply and good suggestion.

 

Pei

 

 

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

@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.

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

Really want to show your appreciation? Buy Me A Cup Of Coffee!
martinav
Community Champion
Community Champion

@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>
"

 

@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&colon;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. 

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

Really want to show your appreciation? Buy Me A Cup Of Coffee!

@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!

Helpful resources

Announcements
PA_User Group Leader_768x460.jpg

Manage your user group events

Check out the News & Announcements to learn more.

Power Query PA Forum 768x460.png

Check it out!

Did you know that you can visit the Power Query Forum in Power BI and now Power Apps

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

Users online (2,859)