cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
PowerSäm
Responsive Resident
Responsive Resident

HTML view in powerapps wrong - Change style - How?

Hello all,

 

I am currently building a form in PowerApps with HTML to print or convert it...

 

Unfortunately I am getting desperate, because I built the form and it works, but the view/style is wrong. In the app it looks like it should be, but as soon as I print it or convert it to PDF, everything squeezes together or the left side is cut. (See pictures)

 

What could be the reason for this? What do I have to change in the HTML? Certain size units?

 

PowerSm_0-1635147637022.pngdigital form in powerapps (right)

 

PowerSm_1-1635147932538.jpegprinted from (wrong)

 

 

Thanks in advance for your help!

1 ACCEPTED SOLUTION

Accepted Solutions

@PowerSäm ,

The modern browsers have a powerfull way to interpret the HTML code, that is not applicable to OneDrive - PDF converter which is based on XHTML standard. 

What I was trying to say in my previous post is that you need to work on HTML code (maybe line by line) and may be with a lot of tests you can obtain the desired results. 

View solution in original post

7 REPLIES 7
gabibalaban
Dual Super User
Dual Super User

@PowerSäm ,

Seems that you print the form in portrait mode, not in landscape ... Can you check the browser print settings ?

Hope it helps !

 

@gabibalaban Thank you for your quick reply. Where or how can I do that?

 

The problem is, before I print it, it is converted to pdf and sent by email, then when I open it in Adobe, it is already incorrectly dressed.

 

PowerSm_0-1635149900825.png

 

Thank you in advance!

@PowerSäm ,
how you convert it to pdf file ? Via power automate using OneDrive - convert a file ?

please note that this action has some limits, one of this is that it convert pdf file only in portrait mode.

Thank you for your reply @gabibalaban 


Yes, exactly, with Power Automate and One Drive.
Now I understand. But the document is basically in Portrait mode. In PowerApps it is horizontal (portrait mode) too and not vertical (landscape mode), so it should work.

PowerSm_0-1635156450571.png

It is already in portrait mode, as you can move it up and down.

 

Thank you in advance!

@PowerSäm ,

I suppose that the conversion is based on a HTML code, so the PowerApps app aspect is not really matter in it. 

Here are, extracted  from the specifications, the known issues with HTML to PDF conversion:

(1) For best performance validate that the HTML follows the XHTML standard. The component will not perform as well as modern web browsers at correctly parsing HTML that is not well-formed, for example if a table row is missing an end tag ().

(2) Under some circumstances non-Latin characters will not render as expected. For example, a set of predefined fonts are installed for languages like Chinese, but if the HTML does not specify a commonly known font the component under some circumstances will fail to determine which font to use and the character won’t be displayed properly.

(3) Each html file is converted to a A4-size PDF. When a single HTML line width is greater than the A4-size width the line will be truncated in the PDF rendering.

 

So, to get the expected aspect of the pdf file supplementary work need to be done. 

Ah ok I understand. But that is strange. When I copy the HTML code and paste it into the browser, it opens it for me as it should. Only when I convert it to PDF with Flow it shoots it apart. Really strange.

 

I have no other idea how to add a form to a document and then convert it to PDf....

@PowerSäm ,

The modern browsers have a powerfull way to interpret the HTML code, that is not applicable to OneDrive - PDF converter which is based on XHTML standard. 

What I was trying to say in my previous post is that you need to work on HTML code (maybe line by line) and may be with a lot of tests you can obtain the desired results. 

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

PA.JPG

New Release Planning Portal (Preview)

Check out our new release planning portal, an interactive way to plan and prepare for upcoming features in Power Platform.

Top Solution Authors
Top Kudoed Authors
Users online (3,669)