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

Question

Hello everyone!&nbsp;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.&nbsp;&nbsp;I've included my current Flow, and the HTML script (edited down to remove identifying information) that I've got at the moment.&nbsp;&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width"&gt;
  &lt;title&gt;Test Title&lt;/title&gt;
&lt;/head&gt;
  
&lt;body style="text-align:center"&gt;
&lt;img src="data&amp;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"/&gt;
&lt;table style="display:inline-block" align="right"&gt;
&lt;tr&gt;
&lt;td style="font-size:12px"&gt;For Office Use Only&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style="border:0px"&gt;
&lt;td style="font-size:12px"&gt;Fall Semester 20____&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style="border:0px"&gt;
&lt;td style="font-size:12px"&gt;Spring Semester 20____&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;&nbsp;

hansleroy · Answer

Hi McTwitch,What I'd try:1/ removestyle="display:inline-block"2/ or remove&lt;img src="data&amp;colon;image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAO0AAAAwCAIAAAByj2opAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQ...Does that make any difference?Kind regardsHans&nbsp;

mctwitch · Answer

Hello&nbsp;hansleroy!&nbsp;&nbsp;Unfortunately, I can't remove those parts. The &lt;img&gt; tag is an image that I need in the final document, and I'm trying to get the &lt;table&gt; and the &lt;img&gt; to display in-line with eachother.&nbsp;

hansleroy · Answer

Hi,Well, at least something has to be tweaked, no?At least I'd remove the &lt;table&gt; tags to see if it makes any difference.Kind regardsHans

jefmeyer · Answer

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.

mctwitch · Answer

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?

Forum Discussion

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

Share

Resources