Converting HTML to PDF - Inline-Block Elements Don't Work

%3CLINGO-SUB%20id%3D%22lingo-sub-3111878%22%20slang%3D%22en-US%22%3EConverting%20HTML%20to%20PDF%20-%20Inline-Block%20Elements%20Don't%20Work%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3111878%22%20slang%3D%22en-US%22%3E%3CP%3EHello%20everyone!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI'm%20working%20on%20a%20flow%20that%20takes%20the%20response%20from%20an%20MS%20Form%2C%20imports%20the%20response%20into%20an%20HTML%20document%2C%20converts%20the%20HTML%20to%20a%20PDF%2C%20and%20finally%20emails%20the%20PDF%20to%20someone.%20The%20problem%20being%20that%20no%20matter%20how%20I%20try%20to%20format%20the%20HTML%2C%20there%20are%20certain%20portions%20of%20it%20that%20just%20don't%20seem%20to%20work%20-%20mostly%20the%20in-line%20elements%20don't%20appear%20in-line.%20Every%20solution%20I've%20attempted%20has%20them%20looking%20correct%20in%20the%20editor%2C%20but%20once%20I%20test%20out%20the%20Flow%2C%20they're%20no%20longer%20in-line.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI've%20included%20my%20current%20Flow%2C%20and%20the%20HTML%20script%20(edited%20down%20to%20remove%20identifying%20information)%20that%20I've%20got%20at%20the%20moment.%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22WorkingFlow.PNG%22%20style%3D%22width%3A%20327px%3B%22%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%22%20image-alt%3D%22WorkingFlow.PNG%22%20style%3D%22width%3A%20327px%3B%22%3E%3Cspan%20class%3D%22lia-inline-image-display-wrapper%22%20image-alt%3D%22WorkingFlow.PNG%22%20style%3D%22width%3A%20327px%3B%22%3E%3Cimg%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F345050i8C2B108CE60965FC%2Fimage-dimensions%2F327x212%3Fv%3Dv2%22%20width%3D%22327%22%20height%3D%22212%22%20role%3D%22button%22%20title%3D%22WorkingFlow.PNG%22%20alt%3D%22WorkingFlow.PNG%22%20%2F%3E%3C%2Fspan%3E%3C%2FSPAN%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-markup%22%3E%3CCODE%3E%0A%0A%0A%20%20%26lt%3Bmeta%20charset%3D%22utf-8%22%20%2F%26gt%3B%0A%20%20%26lt%3Bmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice-width%22%20%2F%26gt%3B%0A%20%20%3CTITLE%3ETest%20Title%3C%2FTITLE%3E%0A%0A%20%20%0A%0A%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Fdata%26amp%3Bcolon%3Bimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAO0AAAAwCAIAAAByj2opAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAAUfSURBVHhe7ZzrgeMgDIS3rhSUelKNm0kxe2BkIx4SAstcwur7tZvIYhjG2M7l9ufXML4fy7GxApZjYwUsx8YKWI6NFbAcGytgOTZWwHJsrIDl2FgBy7GxApZjYwUsx8YKWI6NFbAc38bbAz8bNyPJ8Xt7vZ4Pxw%2FC%2Ffp8vjZbqRrvV%2FTqucGLd4EH6%2Bd2eXNgc%2FzeXHxhvgwPn2c4xHAkyXq8bvZme8JIQ9wubw5Ujn2EYaYyHk%2FL8sE35Xjl%2FbhypXJ77mtzdxEH27b5ew14N7DIqa3BuQs43yaYAouSscVlfPg7wBrQ4L%2Fj9s0oFV7rocxxHuLGRovuPSzHnwVayY9fGqR16AqR5zhNsXT64S7EcvxZ%2FN0cpyle5Nbpz%2FJnc4yfGGxz%2FXr%2BaI6TzfiWvdg%2FeqQPh%2F5T6NaH0OfZFW%2FU80aCLggtGW%2FXBV5zLZIHuviI1fgYB7QgMaAF3r%2FChRz3WoR2QGaoQlASOQqR9pjje2OcrHkFRix6knU1zmCykXskhWMo9GRUVKDR47rSHRsfbaYnxghjOR6zCAWZGgxbBlbho2gkYYw5xj2VY1wumDu7k7N9hxgVBYjJMMAt2N0y0IHRTMGi0lxbh4EcX7AI56cyXCXFDjceAG%2FtwEuA6Hw%2Bc1wfR4FkxYoP8dJNqWo3NujA9zlKs31NEhwlGeFK6%2FFXYdyzkeOkV3q9Dr2OtyRLSNKb46sWMUlupgsVDKXvzDEWoZhjPAHKzMYk8wDV2rSGmSTjJBZXykRi9j3%2F2kKgcVixAQWLyCSj14kpoc5Dk67lWDKLCrXDhFays0gCRHZhrVKX0TI7FpfjCZzWQTjrgIZFDuzSUcAuDdDq26Inx1hjjfI4sbpYWDaJwwoNLsqUZbA6Aozmrj6X4CzJUbFoB6fEt0K%2FM53F4xMo7sflcXIjuWkwmcDQfk2VEaCL5WIu0zGUjkUAWgn3yAY%2FNBoL2rJcvj%2FmHMA9s4fQHChyMF1YJ9Bgmf6pMgJ0MS1TnY4c61h0gAY%2BaShQyzEeW7BQJ%2BIcS2G6sLrogEyVEaCLaZnqjOZYCtM0T3LTMrUcjwZZO8fl0MIA0QGZKiNAF9My1bk5x1zPol9LgF6O07HFzYQ5vrBmsQtrBj3YVBkBulhHjIixHCuoQt0ivATFHONeosXa4czqMJJBGCB6KabKCNDFOmJEdAylqQovxAv9wnZGAi7nGDdzyCbEOkBnqwNhgJixZsoIMMVIjMzhYXrCqWKRp5geeoFprZrjPMkSo3mzNBYt9mBbcCsxUUaAKcYWD4sR0ZNjFYuILuhFMqRdWitkOS6S7NuyXyJE%2F%2BpeE4DnMOgPkwkMGqk0a56MAFssERO%2BZTEoFejLhqpFaYckU%2FUk45KRDbnIsaOIsmP%2FYxXwpRjPFv6mBbwbqM8e%2BxO%2BEwNvYPaGrl%2Ftu01sJiJonJoRs2QE%2BOLU4PR7Ql7DaaxgJIa%2BHF%2B2CB%2Ber0A7yVnF0dydz%2Fw%2BCtRy7Mi%2BQyaDOo%2Bq58UB%2FH5Q6SEMELKxLmSOjECruKalwtwcX7KIS7Enad0sSKgvZwqR4x15mN3pyZ800lY1v7Vy7JggIyAobmppedqkP8eOMYtaKfYMJ%2FlqjgG%2FtbsLSX4T4Qj3GlAmwN%2F0%2BU7QIuAb%2BU7JxRUj%2FD9Csaz1FxBulRGQFoO3UOvxKmSX0iYuktBUIjmh0yJ02nKhw0GtK%2FLj4lG9GSLpghwbxsdjOTZWwHJsrIDl2FgBy7GxApZj4%2Fv5%2Ff0HHJFjFOX1vWsAAAAASUVORK5CYII%3D%22%20width%3D%22236.16px%22%20height%3D%2248px%22%20style%3D%22display%3Ainline-block%22%20%2F%3E%3C%2FCODE%3E%3C%2FPRE%3E%3C%2FLINGO-BODY%3E%0A%3CTABLE%20style%3D%22display%3Ainline-block%22%20align%3D%22right%22%3E%0A%3CTBODY%3E%3CTR%3E%0A%3CTD%20style%3D%22font-size%3A12px%22%3EFor%20Office%20Use%20Only%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3CTR%20style%3D%22border%3A0px%22%3E%0A%3CTD%20style%3D%22font-size%3A12px%22%3EFall%20Semester%2020____%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3CTR%20style%3D%22border%3A0px%22%3E%0A%3CTD%20style%3D%22font-size%3A12px%22%3ESpring%20Semester%2020____%3C%2FTD%3E%0A%3C%2FTR%3E%0A%3C%2FTBODY%3E%3C%2FTABLE%3E%0A%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3CLINGO-LABS%20id%3D%22lingo-labs-3111878%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EMicrosoft%20Forms%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-3113102%22%20slang%3D%22en-US%22%3ERe%3A%20Converting%20HTML%20to%20PDF%20-%20Inline-Block%20Elements%20Don't%20Work%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3113102%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1296251%22%20target%3D%22_blank%22%3E%40McTwitch%3C%2FA%3E%2C%3C%2FP%3E%3CP%3EWhat%20I'd%20try%3A%3C%2FP%3E%3CP%3E1%2F%20remove%3C%2FP%3E%3CP%3Estyle%3D%22display%3Ainline-block%22%3C%2FP%3E%3CP%3E2%2F%20or%20remove%3C%2FP%3E%3CP%3E%3CIMG%20src%3D%22%26quot%3Bdata%26amp%3Bcolon%3Bimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAO0AAAAwCAIAAAByj2opAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQ...%26lt%3B%2FP%22%20%2F%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CP%3E%3C%2FP%3E%3CP%3E%3C%2FP%3E%3CP%3EDoes%20that%20make%20any%20difference%3F%3C%2FP%3E%3CP%3EKind%20regards%3C%2FP%3E%3CP%3EHans%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%20tag%20is%20an%20image%20that%20I%20need%20in%20the%20final%20document%2C%20and%20I'm%20trying%20to%20get%20the%20%3CTABLE%3E%20and%20the%20%3CIMG%20%2F%3E%20to%20display%20in-line%20with%20eachother.%26nbsp%3B%3CP%3E%3C%2FP%3E%3C%2FTABLE%3E%3CP%3E%3C%2FP%3E%3CLINGO-SUB%20id%3D%22lingo-sub-3113108%22%20slang%3D%22en-US%22%3ERe%3A%20Converting%20HTML%20to%20PDF%20-%20Inline-Block%20Elements%20Don't%20Work%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-3113108%22%20slang%3D%22en-US%22%3E%3CP%3EHello%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F150069%22%20target%3D%22_blank%22%3E%40Hans%20Le%20Roy%3C%2FA%3E!%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EUnfortunately%2C%20I%20can't%20remove%20those%20parts.%20The%20%3CIMG%20%2F%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%20tag%20is%20an%20image%20that%20I%20need%20in%20the%20final%20document%2C%20and%20I'm%20trying%20to%20get%20the%20%3CTABLE%3E%20and%20the%20%3CIMG%20%2F%3E%20to%20display%20in-line%20with%20eachother.%26nbsp%3B%3CP%3E%3C%2FP%3E%3C%2FTABLE%3E%3CP%3E%3C%2FP%3E
New Contributor

Hello everyone!

 

I'm working on a flow that takes the response from an MS Form, imports the response into an HTML document, converts the HTML to a PDF, and finally emails the PDF to someone. The problem being that no matter how I try to format the HTML, there are certain portions of it that just don't seem to work - mostly the in-line elements don't appear in-line. Every solution I've attempted has them looking correct in the editor, but once I test out the Flow, they're no longer in-line. 

 

I've included my current Flow, and the HTML script (edited down to remove identifying information) that I've got at the moment.

WorkingFlow.PNG

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test Title</title>
</head>
  
<body style="text-align:center">
<img src="data&colon;image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAO0AAAAwCAIAAAByj2opAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAAUfSURBVHhe7ZzrgeMgDIS3rhSUelKNm0kxe2BkIx4SAstcwur7tZvIYhjG2M7l9ufXML4fy7GxApZjYwUsx8YKWI6NFbAcGytgOTZWwHJsrIDl2FgBy7GxApZjYwUsx8YKWI6NFbAc38bbAz8bNyPJ8Xt7vZ4Pxw/C/fp8vjZbqRrvV/TqucGLd4EH6+d2eXNgc/zeXHxhvgwPn2c4xHAkyXq8bvZme8JIQ9wubw5Ujn2EYaYyHk/L8sE35Xjl/bhypXJ77mtzdxEH27b5ew14N7DIqa3BuQs43yaYAouSscVlfPg7wBrQ4L/j9s0oFV7rocxxHuLGRovuPSzHnwVayY9fGqR16AqR5zhNsXT64S7EcvxZ/N0cpyle5Nbpz/Jnc4yfGGxz/Xr+aI6TzfiWvdg/eqQPh/5T6NaH0OfZFW/U80aCLggtGW/XBV5zLZIHuviI1fgYB7QgMaAF3r/ChRz3WoR2QGaoQlASOQqR9pjje2OcrHkFRix6knU1zmCykXskhWMo9GRUVKDR47rSHRsfbaYnxghjOR6zCAWZGgxbBlbho2gkYYw5xj2VY1wumDu7k7N9hxgVBYjJMMAt2N0y0IHRTMGi0lxbh4EcX7AI56cyXCXFDjceAG/twEuA6Hw+c1wfR4FkxYoP8dJNqWo3NujA9zlKs31NEhwlGeFK6/FXYdyzkeOkV3q9Dr2OtyRLSNKb46sWMUlupgsVDKXvzDEWoZhjPAHKzMYk8wDV2rSGmSTjJBZXykRi9j3/2kKgcVixAQWLyCSj14kpoc5Dk67lWDKLCrXDhFays0gCRHZhrVKX0TI7FpfjCZzWQTjrgIZFDuzSUcAuDdDq26Inx1hjjfI4sbpYWDaJwwoNLsqUZbA6Aozmrj6X4CzJUbFoB6fEt0K/M53F4xMo7sflcXIjuWkwmcDQfk2VEaCL5WIu0zGUjkUAWgn3yAY/NBoL2rJcvj/mHMA9s4fQHChyMF1YJ9Bgmf6pMgJ0MS1TnY4c61h0gAY+aShQyzEeW7BQJ+IcS2G6sLrogEyVEaCLaZnqjOZYCtM0T3LTMrUcjwZZO8fl0MIA0QGZKiNAF9My1bk5x1zPol9LgF6O07HFzYQ5vrBmsQtrBj3YVBkBulhHjIixHCuoQt0ivATFHONeosXa4czqMJJBGCB6KabKCNDFOmJEdAylqQovxAv9wnZGAi7nGDdzyCbEOkBnqwNhgJixZsoIMMVIjMzhYXrCqWKRp5geeoFprZrjPMkSo3mzNBYt9mBbcCsxUUaAKcYWD4sR0ZNjFYuILuhFMqRdWitkOS6S7NuyXyJE/+peE4DnMOgPkwkMGqk0a56MAFssERO+ZTEoFejLhqpFaYckU/Uk45KRDbnIsaOIsmP/YxXwpRjPFv6mBbwbqM8e+xO+EwNvYPaGrl/tu01sJiJonJoRs2QE+OLU4PR7Ql7DaaxgJIa+HF+2CB+er0A7yVnF0dydz/w+CtRy7Mi+QyaDOo+q58UB/H5Q6SEMELKxLmSOjECruKalwtwcX7KIS7Enad0sSKgvZwqR4x15mN3pyZ800lY1v7Vy7JggIyAobmppedqkP8eOMYtaKfYMJ/lqjgG/tbsLSX4T4Qj3GlAmwN/0+U7QIuAb+U7JxRUj/D9Csaz1FxBulRGQFoO3UOvxKmSX0iYuktBUIjmh0yJ02nKhw0GtK/Lj4lG9GSLpghwbxsdjOTZWwHJsrIDl2FgBy7GxApZj4/v5/f0HHJFjFOX1vWsAAAAASUVORK5CYII=" width="236.16px" height="48px" style="display:inline-block"/>
<table style="display:inline-block" align="right">
<tr>
<td style="font-size:12px">For Office Use Only</td>
</tr>
<tr style="border:0px">
<td style="font-size:12px">Fall Semester 20____</td>
</tr>
<tr style="border:0px">
<td style="font-size:12px">Spring Semester 20____</td>
</tr>
</table>
</body>
</html>

 

6 Replies

Hi @McTwitch,

What I'd try:

1/ remove

style="display:inline-block"

2/ or remove

<img src="data&colon;image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAO0AAAAwCAIAAAByj2opAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQ...

Does that make any difference?

Kind regards

Hans

 

Hello @Hans Le Roy

 

Unfortunately, I can't remove those parts. The <img> tag is an image that I need in the final document, and I'm trying to get the <table> and the <img> to display in-line with eachother. 

Hi,
Well, at least something has to be tweaked, no?
At least I'd remove the <table> tags to see if it makes any difference.
Kind regards
Hans
We're attempting something similar. In our case, generating a HTML file using DIVs to display and image and overlay text on the image. The HTML file is generated correctly, however when converting via the OneDrive step, the overlay text is "stacked up" at the bottom of the PDF. Using the browser print on the HTML file, the text is correctly placed in the PDF. Perhaps this is a bug/limitation of the Convert File step and why still in preview? Curious to know if anyone has successfully accomplished this.
Wait, so when you take the generated HTML and use the print to PDF function, the text displays correctly?

I honestly haven't tried that, but it does take away from the auto-generated portion of it. I know that I went through and created an HTML document by hand that had all of the correct formatting, and when I copied and pasted it into the Create a Document portion of my flow, a lot of the formatting didn't stick, so I've been working on recreating all of it in that box, to make sure what I have actually works. I'm just getting stuck on the getting the image and text to display in-line!

Any chance I could take a look at your flow, to see how you have it set up?

EDIT: updated HTML to include image variable.

 

@McTwitch - the flow is basic right now, just trying to get it to work.

jefmeyer_0-1644330136972.png

The Get File Content, retrieves the image and the next step loads it into a variable.  In the Create File, we build the HTML string, along with the image variable, and save as HTML file to OneDrive.  At this point, the HTML displays correctly and we can do a print to PDF from the browser and the PDF matches the HTML.  The Convert File, we convert to PDF and then create the PDF in OneDrive, at which point, the text overlay is no longer displaying correctly.   It seems like the conversion in Power is breaking the format. Here's a sample of the HTML we're generating (sorry for inline, can't attach .txt to the post): 

 

<!DOCTYPE html>
<html><head><meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {position: absolute; text-align: center;color: black;}
.bottom-left {position: absolute; bottom: 8px;left: 16px;}
.top-left {position: absolute;top: 8px;left: 16px;}
.top-right {position: absolute;top: 8px;right: 16px;}
.bottom-right {position: absolute;bottom: 8px;right: 16px;}
.centered {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>How to place text over an image:</p>
<div class="container">

<img src="',variables('PDFImage'),'" alt="Snow" style="width:100%;">

<div class="bottom-left">Bottom Left</div>
<div class="top-left">Top Left</div>
<div class="top-right">Top Right</div>
<div class="bottom-right">Bottom Right</div>
<div class="centered">Centered</div>
</div></body></html>

 

Hope this helps.