You are viewing limited content. For full access, please sign in.

Question

Question

Custom HTML box - formatting issues

asked on November 24, 2015

I am having real difficulty carrying over text used in a previous word document to have the same format and look within Laserfiche Forms, using a Custom HTML box. 

Within our company we are transitioning a service which we previously carried out using Microsoft Word and e-mail into Laserfiche Forms. Within our old 'form' procedure, forms would have instructions and these were often a whole page or more in length. 

 

I am now having real difficulty replicating the look I had within my Word format by copying and pasting an using a HTML editor online! I am getting no spaces between words, double spaces, unwanted new lines, unwanted new paragraphs etc etc.

 

If anyone has any solution or a HTML editor recommendation that will simply capture the look of a page worth of text and transfer it into my Laserfiche Form it would be greatly appreciated!

 

Thanks,

 

Christian 

0 0

Answer

SELECTED ANSWER
replied on November 24, 2015

No problem, and I see what you're trying to do now! I think the best way might be to use a table format if you want to use HTML. I've quickly modified a snippet that I've used before, which I've pasted below along with a screenshot of it's result:

 

<table>
<tbody>
<tr>
<td style="padding-right:30px;position:relative;"><span style="position:absolute;top:0;">1.</span></td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu mattis ligula, quis blandit enim. In interdum elit massa, et scelerisque diam tempor vitae. Etiam rhoncus molestie elementum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean mollis enim diam. Vivamus at odio finibus, tincidunt ipsum id, suscipit velit. Aliquam libero metus, auctor eu bibendum ac, rutrum non lacus.<br><br></td>
</tr>
<tr>
<td style="padding-right:30px;position:relative;"><span style="position:absolute;top:0;">2.</span></td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu mattis ligula, quis blandit enim. In interdum elit massa, et scelerisque diam tempor vitae.<br><br></td>
</tr>
<tr>
<td style="padding-right:30px;position:relative;"><span style="position:absolute;top:0;">3.</span></td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu mattis ligula, quis blandit enim. In interdum elit massa, et scelerisque diam tempor vitae.<br><br></td>
</tr>
<tr>
<td style="padding-right:30px;position:relative;"><span style="position:absolute;top:0;">4.</span></td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu mattis ligula, quis blandit enim. In interdum elit massa, et scelerisque diam tempor vitae.<br><br></td>
</tr>
<tr>
<td style="padding-right:30px;position:relative;"><span style="position:absolute;top:0;">5.</span></td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu mattis ligula, quis blandit enim. In interdum elit massa, et scelerisque diam tempor vitae.<br><br></td>
</tr>
<tr>
<td style="padding-right:30px;position:relative;"><span style="position:absolute;top:0;">5.</span></td>
<td><table><tbody><tr><td>This form is completed:</td><td style="padding-left:50px;">By:</td><td style="padding-left:20px;">The Authorizer</td></tr><tr><td></td><td style="padding-left:50px;">When:</td><td style="padding-left:20px;">Before undertaking some activity of some sort</td></tr></tbody></table></td>
</tr>
<tr>
<td style="padding-right:30px;position:relative;"><span style="position:absolute;top:0;"><br>6.</span></td>
<td><table><tbody><tr><td><br>This form is completed:</td><td style="padding-left:50px;"><br>Yatchs (1234)</td></tr></tbody></table></td>
</tr>
</tbody>
</table>

 

Might not look the prettiest piece of code but it gets the job done wink

1 0

Replies

replied on November 24, 2015

Hi Christian,

How complex is the formatting that you're trying to achieve, could you possibly add a screenshot?

If it's not too complicated the custom HTML box in forms does have a text designer similar to what you get when creating a post on Answers where you can change fonts, size, weight and decoration etc. But I take it you are probably looking for something a bit more substantial than this?

Cheers! Dan

0 0
replied on November 24, 2015

Hi Dan,

 

Thanks for the quick response!

 

I have attached two images, one o my MS Word document and its nice format (how I want it to look in my LF Form) and the format at the moment.

 

Highlighted section looks OK for now and the Red is just aspects of the text that looks poor where lines are not formatted with good structure.

 

Any help would be appreciated!

 

Thanks! Christian

HTML Box - not good.JPG
Word Format.JPG
Word Format.JPG (89.42 KB)
0 0
replied on November 24, 2015

Is it necessary that it be in HTML format? We had a project where we had to present a contract to the end user for them to review and sign. It was a pdf document that needed to be converted to PDF. We started out by using https://www.idrsolutions.com/online-pdf-to-html5-converter/  which gave us reasonable results (still had to do quite a bit of tweaking), but then any change from that point on would be tedious and expensive. We ended up converting the PDF to Images using Ghostscript and wrapped it in a function that returned html that way users could update the contract without user intervention. We then just put the html in a custom HTML control for display.

0 0
SELECTED ANSWER
replied on November 24, 2015

No problem, and I see what you're trying to do now! I think the best way might be to use a table format if you want to use HTML. I've quickly modified a snippet that I've used before, which I've pasted below along with a screenshot of it's result:

 

<table>
<tbody>
<tr>
<td style="padding-right:30px;position:relative;"><span style="position:absolute;top:0;">1.</span></td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu mattis ligula, quis blandit enim. In interdum elit massa, et scelerisque diam tempor vitae. Etiam rhoncus molestie elementum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean mollis enim diam. Vivamus at odio finibus, tincidunt ipsum id, suscipit velit. Aliquam libero metus, auctor eu bibendum ac, rutrum non lacus.<br><br></td>
</tr>
<tr>
<td style="padding-right:30px;position:relative;"><span style="position:absolute;top:0;">2.</span></td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu mattis ligula, quis blandit enim. In interdum elit massa, et scelerisque diam tempor vitae.<br><br></td>
</tr>
<tr>
<td style="padding-right:30px;position:relative;"><span style="position:absolute;top:0;">3.</span></td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu mattis ligula, quis blandit enim. In interdum elit massa, et scelerisque diam tempor vitae.<br><br></td>
</tr>
<tr>
<td style="padding-right:30px;position:relative;"><span style="position:absolute;top:0;">4.</span></td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu mattis ligula, quis blandit enim. In interdum elit massa, et scelerisque diam tempor vitae.<br><br></td>
</tr>
<tr>
<td style="padding-right:30px;position:relative;"><span style="position:absolute;top:0;">5.</span></td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu mattis ligula, quis blandit enim. In interdum elit massa, et scelerisque diam tempor vitae.<br><br></td>
</tr>
<tr>
<td style="padding-right:30px;position:relative;"><span style="position:absolute;top:0;">5.</span></td>
<td><table><tbody><tr><td>This form is completed:</td><td style="padding-left:50px;">By:</td><td style="padding-left:20px;">The Authorizer</td></tr><tr><td></td><td style="padding-left:50px;">When:</td><td style="padding-left:20px;">Before undertaking some activity of some sort</td></tr></tbody></table></td>
</tr>
<tr>
<td style="padding-right:30px;position:relative;"><span style="position:absolute;top:0;"><br>6.</span></td>
<td><table><tbody><tr><td><br>This form is completed:</td><td style="padding-left:50px;"><br>Yatchs (1234)</td></tr></tbody></table></td>
</tr>
</tbody>
</table>

 

Might not look the prettiest piece of code but it gets the job done wink

1 0
replied on November 25, 2015

Daniel!

 

This has worked! You have understood how I wanted my layout to be! I can most probably use the code above to for a number of similar documets I am tranforming into Laserfiche Forms! 

 

Thanks very much - appreciate it!

 

Christian

1 0
You are not allowed to follow up in this post.

Sign in to reply to this post.