cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
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
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. Solved your problem? - Click on Accept as Solution. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too!

View solution in original post

7 REPLIES 7
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. Solved your problem? - Click on Accept as Solution. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too!

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. Solved your problem? - Click on Accept as Solution. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too!
Resident Rockstar
Resident Rockstar

@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. Solved your problem? - Click on Accept as Solution. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too!

@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
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

News & Announcements

Community Blog

Stay up tp date on the latest blogs and activities in the community News & Announcements.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Community Highlights

Community Highlights

Check out the Power Platform Community Highlights

Top Solution Authors
Top Kudoed Authors
Users online (7,807)