HTML Text position: absolute issuea

[ShehanPeiris]

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 

[RandyHayes]

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

[ShehanPeiris]

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?

[RandyHayes]

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

[v-xida-msft]

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,

[ShehanPeiris]

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

I already enabled it, but not works.

[v-xida-msft]

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,

[RandyHayes]

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