cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
ShehanPeiris
Frequent Visitor

HTML Text position: absolute issuea

Hi All,

I'm creating a power app that sends an email to the selected user with a certificate. for that, I used HTML Text and my texts are positioning under the image when I receive an email. but texts should be on top of the image. In the App, it previews correctly. Texts are positioned on top of the certificate JPG, when mail receives it's not.

 

see my code below.

 

"<div class=""container"" style="" position: relative;text-align: center;"">
<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRwx_lMfmgAspd5AgcWTPuMczwVA4feawQJmA&usqp=CA...' style=""width:100%;"">
<div class=""centered"" style="" position: absolute;
top: 50%;
left: 50%;
transform: translate(20%, -790%);font-size:35px;font-weight:bold;font-family:'Arial';
color:#000000"">" & "Certificate" & "</div>

<div class=""centered"" style="" position: absolute;
top: 50%;
left: 50%;
transform: translate(50%, -50%);font-size:35px;font-weight:bold;font-family:'Arial';
color:#000000"">" & "Certificate" & "</div>

</div>"

 

Please help me to sort 

 

 

 

7 REPLIES 7
RandyHayes
Super User III
Super User III

@ShehanPeiris 

You issue is most likely with your Email application and not the PowerApp.  If you are using Outlook, for example, it does not like many relative positioning html and a list of other things it doesn't like.

We struggle with getting HTML correct for Outlook more than anything.  There are so many workarounds that you have to go at to get it correct.  

I would start by searching for HTML formatting issues in Outlook.  You will find a ton of articles on issues people have with it and ways to work around it.

 

I hope this is helpful for you.

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

Hi @RandyHayes,
Thank you for your reply, I also searched for a possible solution but unfortunately, I did not find it.

Do you know any other alternate way to do this?

@ShehanPeiris 

I would say in your case you should explore converting the Html to another format (SVG, IMG, PDF, etc.)

The reason I say that is because what you are trying to provide SHOULD look nice ALWAYS!  Trying to get that Html to format properly in Outlook (and then any other variety of email clients - or in the case where someone opts for plain text over Html) is going to give you heartburn.  

In many of my own situations, we kind of hit a point and say it is what it is.  If it formats different for some it is not a problem - mostly because were generating reports and other various information in the email.  If something doesn't quite format the way we want, it's not a big deal because the data is there.

In your case, this should be a nice and pretty certificate.  So you should opt for it to be an embedded image or an attached file.

That's just my thoughts on it.

_____________________________________________________________________________________
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!
v-xida-msft
Community Support
Community Support

Hi @ShehanPeiris ,

Based on the HTML Code that you mentioned, I could not find any syntax issue with it. I agree with @RandyHayes 's though almost. I think this issue is not related to Power Apps canvas app, it is related to email template render.

 

Please make sure if you have enable {IsHtml: true} option when you use Microsoft365Outlook.SendEmail() function to send email. The formula should be as below:

Microsoft365Outlook.SendEmail(
                               " <Type To Email Address Here>",
                               " <Type Subject Line Here> ", 
                               " <Type your HTML Code Here> ", 
                               {
                                  IsHtml: true           // enable this option
                               }
)

 

If you use Microsoft365Outlook.SendEmailV2() function to send email, it is no need to enable the  {IsHtml: true} option, the Email body content would be rendered as HTML text automatically.

 

Regards,

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Hi @v-xida-msft ,
Thank you for your reply.

I already enabled it, but not works.

Hi @ShehanPeiris ,

Have you tried to print your HTML Text into a PDF file or a HTML file? Does the same issue occur?

 

Please consider submit an assisted support ticket through the following link for further help:
https://powerapps.microsoft.com/en-us/support/pro

 

Regards,

 

Community Support Team _ Kris Dai
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

@ShehanPeiris 

As mentioned, you're fighting an Outlook HTML formatting issue, not a PowerApps issue.  You will have limited success trying to get Outlook HTML to do exactly what you want - and again, that would just cover Outlook -what about other email readers?

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

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.

PowerPlatform 768x460.png

Microsoft Learn

Check out our new Discover Your Career Path blog post series and get all the details.

Users online (973)