cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Jakson
Resolver I
Resolver I

Create HTML document w/ Two Column design

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

1 ACCEPTED SOLUTION

Accepted Solutions

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.



-------------------------------------------------------------------------
If I have answered your question, please mark your post as Solved.
If you like my response, please give it a Thumbs Up.

View solution in original post

5 REPLIES 5
Pstork1
Dual Super User
Dual Super User

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



-------------------------------------------------------------------------
If I have answered your question, please mark your post as Solved.
If you like my response, please give it a Thumbs Up.

<!DOCTYPE html>
<html>
<head>
<title>Note Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--version 2.2.1 11/19/2021-->


<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?

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.



-------------------------------------------------------------------------
If I have answered your question, please mark your post as Solved.
If you like my response, please give it a Thumbs Up.

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

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!

Helpful resources

Announcements
Microsoft 365 Conference – December 6-8, 2022

Microsoft 365 Conference – December 6-8, 2022

Join us in Las Vegas to experience community, incredible learning opportunities, and connections that will help grow skills, know-how, and more.

Difinity Conference 2022

Difinity Conference 2022

Register today for two amazing days of learning, featuring intensive learning sessions across multiple tracks, led by engaging and dynamic experts.

European SharePoint Conference

European SharePoint Conference

The European SharePoint Conference returns live and in-person November 28-December 1 with 4 Microsoft Keynotes, 9 Tutorials, and 120 Sessions.

Users online (5,050)