Feb 03 2022 08:26 AM
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.
<!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: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>
Feb 03 2022 12:03 PM
Hi @McTwitch,
What I'd try:
1/ remove
style="display:inline-block"
2/ or remove
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAO0AAAAwCAIAAAByj2opAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQ...
Does that make any difference?
Kind regards
Hans
Feb 03 2022 12:07 PM
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.
Feb 04 2022 12:29 AM
Feb 07 2022 11:15 AM
Feb 08 2022 06:07 AM
Feb 08 2022 06:33 AM - edited Feb 08 2022 06:37 AM
EDIT: updated HTML to include image variable.
@McTwitch - the flow is basic right now, just trying to get it to work.
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">
<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.