After saving a form into Laserfiche, I found that it does not look like on the website. Fields are all shifted out of place, any idea? Thanks.
Saved Form in Laserfiche (PDF or Tiff)
Form in Web Browser(Chrome)
This is normal for Forms. Presenting formatted data isn't really it's strong point. It's much better at acting on that data and plugging it into other places that will be useful. Saving the result into Laserfiche is more for creating some kind of artifact of the process. (At least that's the way I see it)
If you need to create a "prettier" result, you could look into having Workflow plug the data into a PDF form. Then you can make it look like anything you want. I don't know if there's a way to format the document that gets saved to Laserfiche by default.
What's saved in the repository should look a lot like what you see in Forms. If it doesn't there might be some print CSS rules that are causing some issues. The CSS rules you used to create that layout may not be written to work when those fields are read-only.
Thanks Eric, I will double check my CSS coding.
After looking through my CSS, I not seeing anything that stands out that would break the view. I was wondering if you could take a quick look and let me know?
I also have 2 look up field rules that sets to view based on a check box being checked. Thanks.
.Country+label, .Country {display:none;}
.Address2+label, .Address2 {display:none;}
#Field143 {display:none;}
#q142 {padding-left: 310px;}
#q142 .cf-label {width: 310px;}
#q142, #q60 {padding-top: 0px;}
#q142 {padding-bottom: 0px;}
.cf-lab-large .label-left .cf-label, .cf-lab-large .label-right .cf-label
{ width: 170px; }
#q1, #q34, #q2, #q35, #q3, #q36, #q4, #q37, #q5, #q38, #q6, #q39, #q7, #q40, #q8, #q41,
#q27, #q36, #q28, #q37, #q29, #q38, #q30, #q31, #q32, #q66, #q68, #q143, #q11, #q12,
#q70, #q71, #q72, #q89, #q130, #q131, #q137, #q138, #q139, #q140, #q97, #q101, #q99,
#q103, #q105, #q106, #q107, #q108, #q109, #q146, #q147, #q217, #q149, #q177, #q178, #q215, #q216
{ display: inline-block; width: 450px; }
#Field1, #Field34, #Field2, #Field35, #Field3, #Field36, #Field4, #Field37, #Field5, #Field38,
#Field6, #Field39, #Field7, #Field30, #Field8, #Field41, #Field27, #Field36, #Field28, #Field37,
#Field29, #Field38,#Field30, #Field40, #Field31, #Field32, #Field66, #Field68, #Field11,
#Field12, #Field70, #Field71, #Field72, #Field97, #Field101, #Field99, #Field103, #Field105,
#Field106, #Field107, #Field108, #Field109, #Field146, #Field147, #Field217, #Field149,
#Field177, #Field178, #Field215, #Field216 { width: 180px; }
#q177 .cf-label, #q178 .cf-label, #q215 .cf-label, #q216 .cf-label { width: 30px; }
#q177 .cf-field, #q215 .cf-field { width: 300px; }
#Field89, #Field130, #Field137, #Field138, #Field139 { width: 250px; }
#q131 .cf-label, #q140 .cf-label, #q138 .cf-label {width: 50px; }
#Field76 { width: 180%; }
#q61, #q62, #q63, #q190, #q193, #q194, #q195, #q196, #q197, #q198, #q199, #q200, #q201, #q202, #q203, #q204,
#q206, #q207, #q208, #q209, #q210, #q211 { display: inline-block; }
#q61, #q62, #q63, #q190, #q193, #q194, #q195, #q196, #q197, #q198, #q199, #q200, #q201, #q202, #q203, #q204,
#q206, #q207 { width: 250px; }
#q61 .cf-field, #q62 .cf-field, #q63 .cf-field, #q193 .cf-field, #q194 .cf-field, #q196 .cf-field, #q197 .cf-field, #q199 .cf-field, #q200 .cf-field,
#q202 .cf-field, #q203 .cf-field, #q206 .cf-field, #q207 .cf-field { width: 400px; }
#q208, #q209, #q210, #q211 { width: 190px; }
#q208 .cf-field, #q209 .cf-field, #q210 .cf-field, #q210 .cf-field { width: 180px}
#Field100 { width: 180%; }
#q225 .cf-label { width: 0px; }
#Field226 { width: 170%; }
#q226 .cf-label { width: 220px; }
#Field227 { width: 165px; }
#q227 .cf-label { width: 120px; }
#q227 .cf-field { width: 40px; }
#q227 {padding-left: 620px;}
#q121 .cf-label, #q128 .cf-label, #q114 .cf-label, #q181 .cf-label, #q213 .cf-label, #q159 .cf-label { width: 0px; }
#Field121, #Field128, #Field114, #Field181, #Field213, #Field159 { width: 220%; }
#q169 .cf-label { width: 190px; }
#q29 .cf-label, #q37 .cf-label, #q38 .cf-label { width: 150px; }
.input[value="_other"]+label, .check label {display:none !important;}
.check .otherchoice {margin-left:10px !important;}
#q208, #q209, #q210, #q211 { display: inline-block; }
#Field208, #Field209, #Field210, #Field211 { width: 200px; }
#q208 .cf-label,#q209 .cf-label,#q210 .cf-label,#q211 .cf-label { width: 10px; }
#q208 .cf-field,#q209 .cf-field,#q210 .cf-field,#q211 .cf-field { width: 180px; }
Looking at the picture it just looks very wide. If you shrink down your browser's width do you get a similar result where the fields wrap to the next line? I think it is just too wide for it to print on one line and get an 8.5x11 image into Laserfiche.
I agree, If you look at the code of CSS that was provided as being applied to that form, there are some obvious issues that may be arising.
Tommy, Can you try using a percentage instead of a set amount of Pixel width for fields? Each time you use an exact number, it is forcing a precise amount of pixels, if the next item cannot be displayed in whats left for that line, it goes to the next line as that is how things get displayed. Using percentages would greatly increase the likelihood of this form saving properly.
If you are having trouble, just take the max width of the form, then take the set amount of pixels you are using now and divide the latter by the first number and multiply by 100. This will give you a good starting point, though I find things look better when doing that conversion if I take away a half a percent or a full percent from each field just to make sure that any padding applied through other CSS isn't being ignored/causing things to look ugly
Hi Tommy,
If your question has been answered, please let us know by clicking the "This answered my question" button on the appropriate response.
If you still need assistance with this matter, just update this thread. Thanks!