Question

Form looks different in preview compared to final product in the repository

Forms

Updated May 26, 2019

asked on March 5, 2015

My form looks different in the forms preview then it does when it is in its pdf form in the repository. Not sure if it is because of my CSS or not. I attached a view of the preview page, a view of the final pdf in the repository and a view of the CSS that I am using.

Print Preview View.png (50.39 KB)

| Download

Saved PDF View.png (50.15 KB)

| Download

View of CSS.png (21.1 KB)

0 0

Answer

SELECTED ANSWER

replied on March 6, 2015

Do you have Javascript hiding fields like Date of Birth when you are viewing the form in the Preview mode? Have you seen what it looks like when you take away some of those field rules?

Also, here is the code I use for side by side formatting...

.LineOne{display: inline-block; width:380px;}
.LineOne .cf-medium {width:100%;}
.LineOne .cf-field {width:90%;}
.LineOne label {width: 125px !important;}
.LineOne > .cf-field {width: 220px !important;}

If you flag the field and label specifications as important, you can apply them to classes rather that individual fields.

3 0

Replies

replied on March 5, 2015

What version of Forms are you running?

0 0

View 9 previous replies

replied on March 5, 2015

We are using 9.2

0 0

replied on March 5, 2015

9.2.0.???

0 0

replied on March 5, 2015

Just found it and its 9.2.0.908

0 0

replied on March 6, 2015

Hi Brandon,

Here are a couple of things you can try out:

1. Save to the repository as a TIFF rather than a PDF

2. Change your CSS from percentage specifications to pixel specifications. If the size of the PDF is different than the size of the form on the screen, that could have an effect on formatting.

I hope this helps!

0 0

replied on March 6, 2015

Saving it as a TIFF did not work. I changed all my percentages over to pixels and that did not work either. I am still getting an output that is being jumbled up.

0 0

SELECTED ANSWER

replied on March 6, 2015

Do you have Javascript hiding fields like Date of Birth when you are viewing the form in the Preview mode? Have you seen what it looks like when you take away some of those field rules?

Also, here is the code I use for side by side formatting...

If you flag the field and label specifications as important, you can apply them to classes rather that individual fields.

3 0

replied on March 6, 2015

I changed my CSS to that style of coding and it seems to be working. The only thing that is happening now is my Date of Birth should be hidden based on selecting Non-Employee.

I am not using any JavaScript. I do have field rules applying. Would the fact that I have a field rule apply to one part of a side by side in my CSS cause the hidden field to show on the final output even though the preview shows it hidden?

0 1

replied on March 6, 2015

The field rules should work so that the way the form looks when the user presses submit is how it will save to the repository.

So is it saving correctly now?

0 0

replied on March 6, 2015

It is no longer being pushed together but I have two fields showing on the saved TIFF file in the repository that are not shown when the person submits the form. Both of these fields are tied to a inline-block code within the CSS.

For example the Date of Birth field is not shown when the person hits the submit button but it shows up on the final copy in the repository.

0 0

replied on March 26, 2015

I have the same issue. I have fields that are supposed to be hidden, and are hidden when the user hit submit. However, if there is any formatting, such as inline-block on the fields, they show up on the tiff image (blank of course). If there are no formatting css on the fields, they do not show up. Also using 9.2.0.908 forms

Here is a screen shot of what the results tab shows a submitted

Here is what the repository has

Below is my CSS code for the fields


#q17 label {width: 100px;}
#q18 label {width: 140px;}
#q17 .cf-field, #q18 .cf-field {width: 200px;}
#q17 .cf-medium, #q18 .cf-medium {width: 200px;}
#q17, #q18 {display: inline-block;}

0 0

replied on March 26, 2015

I was told that using Display: inline-block will over ride show/hide rules when it goes to the repository. I changed mine to Position: relative; Float: left and this fixed it.

0 0

replied on March 27, 2015

Saw that too, good stuff

0 0

replied on May 26, 2019

Hello,

I have a similar issue with one of my form. I have tried to remove my CSS code for displaying fields side by side and it does not change anything.

I have attached a view of the preview form and the saved one in the repository. The yellow areas on the Preview doc are where there are some differences. At the bottom of the page, the "Load status" was supposed to be hidden by a field rule. It is not in the preview but it is in the saved document.

In fact, I am happy with most of the difference in the saved PDF as we were looking to removed the grey background on the field areas, the grey case with . before each photo, etc.

But I would like to understand why there are differences, as we will probably have the same issue with other forms in the future and may not be that happy with the differences...

Thanks in advance for any help !

Question

Question

Form looks different in preview compared to final product in the repository

Answer

Replies

Sign in to reply to this post.