Unanswered

Create HTML document w/ Two Column design

(0) Share

Report

Posted on by Community Power Pla...

I'm building a Flow that takes Forms response data and spits it back out as a formatted PDF document. To accomplish this goal, I am converting my Forms' responses into an HTML document then converting that into a PDF when ready.

I need to put my data into a two column fashion like this:

HEADER 1 HEADER 2

Q1.: A1 Q3.: A3

Q2.: A2 Q4.: A4

...

I went and investigated how to cause this with CSS (sticking inline with the HTML format I'm using) and I found some code that should split my Forms' response data into two equal size columns and (to-boot) smush (or append to the next line) my response data where necessary to make it fit inside the columns.

Only issue is that the conversion process from HTML document to PDF seems to throw out the CSS styling. I can get all of my data into a .html document and plop it into my browser, where it displays the doc with the CSS styling like I want.

What am I doing wrong?

Guidance is deeply appreciated

Categories:

Building flows

I have the same question (0)

All responses (5)

Answers (1)

Pstork1 68,697 Most Valuable Professional on at

Like (1)

Report

Are you sure you are using inline CSS, ie. Style="" or are you using inline HTML attributes? I've had better luck with CSS inline in the actual tag, but there are still some CSS styles that are ignored by the conversion. For example, page breaks are totally ignored. I also find that things like child selectors that are used for more advanced CSS don't work.

Can you show us how and what CSS styling you are implementing? The only other option I can suggest is to build your output as an array and then use a DoUntil loop to retrieve the array items by index to manually separate them into two columns

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report
<!DOCTYPE html> <html> <head> <title>Note Form</title> <meta name="viewport" content="width=device-width, initial-scale=1">  <style> * { box-sizing: border-box; } /* Create two equal columns that floats next to each other */ .column { float: left; width: 50%; padding: 10px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } </style> </head> <body> <div class="row"> <div class="column"> <h2>Demographic information</h2> <p><b>Client's Name: </b></p> <p><b>Note Type: </b></p> <p><b>Visit Date: </b></p> <p><b>Is this visit billable? </b></p> <p><b>CC Email address: </b></p> <p><b>Waiver Type: </b></p> <h2>Visit Information</h2> <p><b>Persons Present:</b></p> <h3>Subjects discussed:</h3><p></p> <h3>Care Coordinator Impression, based on discussion or direct questions</h3> <p><b>Home / Placement: </b></p> <p><b>Feeling good: </b></p> <p><b>Sleeping good: </b></p> <p><b>Diet healthy?: </b></p> <p><b>Safe in environment?: </b></p> <p><b>Treated with dignity?: </b></p> <p><b>Are services timely and per service plan?: </b></p> </div> <div class="row"> <div class="column"> <h3>Care Coordinator Impression, based on discussion or direct questions - continued</h3> <p><b>Emplyoment: </b></p> <p><b>Guardian / POA: </b></p> <p><b>Appearance (if seen): </b></p> <p><b>Grooming (if seen): </b></p> <p><b>Behavioral Impressions: </b></p> <p><b>Legal Issues: </b></p> <p><b>Staff: </b></p> <h3>Comments / Information / Impressions / Concerns</h3> <p></p> <h2>Any Health things going on?</h2> <h3>Have you been to the Emergency Room since we spoke last?</h3> <p></p> <h3>Have you been to the doctor for anything since we last talked?</h3> <p></p> <h3>Any changes in:</h3> <p><b>Diagnosis: </b></p> <p><b>Medication: </b></p> <p><b>Therapies: </b></p> <p><b>Medical Providers: </b></p> <p><b>General Health: </b></p> </div> </div> </body> </html>
My Forms response data goes between the <p> tags. I found this incredibly helpful website that showcases some CSS stylings and HTML basics to help build a basic website w/ interface.

I've been using information primarily from that website to build the HTML code above.

What should I do differently?

Was this reply helpful? Yes No
Verified answer

Pstork1 68,697 Most Valuable Professional on at

Like (1)

Report

The styling you are using will work fine as a web page, but a lot of the formatting you are applying to div's is going to be lost when you convert to a PDF. I would suggest rewriting the HTML to use HTML <Table> and related tags. Most styles applied to those tags will work.

Build the HTML table then in several steps. There is the static HTML that comes before the table, a loop to build the table rows, and the static HTML that comes after the table.

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

I'll give it a whirl and see what I can come up with. Thank you very much for your guidance Pstork1! Much appreciated!

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

It worked to the degree I need it to. I'm finding that I can't exactly format this poor thing down to the pixel like I wanted to going in. I'm thankful my requirements are so ridiculous as to the specific spacing of each character. (That'd be a headache!)

Thank you very much for your help, Pstork1! You're awesome, fam!

Was this reply helpful? Yes No