Question

Form read-only/pdf changes field layout

Forms Version 10 Web Customizations

Updated June 29, 2016

asked on June 28, 2016 • Show version history

Hi guys,

I've got a form with two sets of two fields inline across the form:

I am assuming that due to formatting the label width CSS to 5px to get the fields to line up with the preceding address fields, when I convert the form to read-only for the subsequent review process the text under the right-hand fields displays vertically. I created a copy of the form, made the fields read-only and that resolved the issue for the review process:

However when the PDF is created in the repository it reverts to the vertical layout despite ensuring that the form being stored is the one processed for review:

Is this a CSS issue or something else?

Thanks,

Mike

0 0

Answer

SELECTED ANSWER

replied on June 29, 2016 • Show version history

Hi Mike, I did some playing with this. It looks like the "Text Above"/"Text Below" are actually HTML label elements, so they are also affected by your CSS rule. If you change your CSS rule to have the selector "#q12 .cf-label" then your immediate issue might be resolved.

Here's another way to approach the CSS for the form. In this example I have four fields (in order, #q1 - #q4) that I want to arrange in a 2x2 layout. So #q1 and #q3 will have labels I want to keep off to the left, but I don't need labels for #q2 and #q4. In 1-CustomCodeDesigner.png you can see the layout in the "CSS and JavaScript" pane.

Then include the following CSS:

/* Set all the input fields to display as inline-block elements */
#q1, #q2, #q3, #q4 {display: inline-block;}
/* Set a width for the labels of the first input fields in each row */
#q1 label, #q3 label {width: 150px;}
/* Hide the labels of the second input fields in each row */
#q2 .cf-label, #q4 .cf-label {display: none;}

/* Make the 1st element in each row half the width of the row, plus half of the label width */
#q1, #q3 {width: calc(50% + 75px);}
/* Make the 2nd element in each row half the width of the row, less half of the label width */
#q2, #q4 {width: calc(50% - 75px);}

/* Make most of the elements take up all of the space allocated to them */
#q1 .cf-medium, #q2 .cf-field, #q2 .cf-medium, #q3 .cf-medium,
#q4 .cf-field, #q4 .cf-medium {width: 100% !important;}
/* Because of inheritance, simply setting the first input fields to width 100%
   would cause them to shift to the next line. So instead, adjust for label width. */
#q1 .cf-field, #q3 .cf-field {width: calc(100% - 150px); !important;}

The resulting form looks like 2-FillOutForm.png. Upon submission, the confirmation page in 3-FormSubmission.png preserves the formatting, and when saved to the repository, the PDF in 4-SavedPDF.png also preserves the formatting.

If you want to have more input fields in a row, or if you need to have some be larger than others, etc., you can tweak the percentages. This should also be more adaptive than hard-coding values for each field, if that is something to be concerned about.

Hope this helps!

1-CustomCodeDesigner.png (18.11 KB)

| Download

2-FillOutForm.png (13.13 KB)

| Download

3-FormSubmission.png (10.27 KB)

| Download

4-SavedPDF.png (29.21 KB)

| Download

0 0

Replies

replied on June 28, 2016

Hi Mike,

It sounds like you might be encountering the behavior described in this thread. Try adding corresponding CSS rules for div elements in addition to input elements to see if this helps. You might try also including a {white-space: nowrap;} CSS rule on the input (and div) fields.

If those do not work, could you describe more fully what you mean about fixing a 5px width for labels? There might be another way to achieve your goal with that which circumvents the narrow-width elements altogether.

Cheers!

1 0

replied on June 29, 2016

Thanks James, I'm new to CSS so that isn't something I've come across, I'll follow it up and learn something new hopefully! With regard to the 5px width, what I was attempting to do was align the fields below with the "Address" fields to try to continue the layout. The CSS that enabled me to do that in the forms (but not repository) was the following, with the 5px width on the right-hand label providing the spacing between the fields to match the Address fields:

#q11 label {width: 150px;}
#q11 .cf-field {width: 250px;}
#q11 .cf-medium {width: 250px;}

#q12 label {width: 5px;}
#q12 .cf-field {width: 250px;}
#q12 .cf-medium {width: 250px;}

#q11, #q12 {display: inline-block;}

I'll see how I get on with the div and input elements.

Thanks!

0 0

SELECTED ANSWER

replied on June 29, 2016 • Show version history

Then include the following CSS:

/* Set all the input fields to display as inline-block elements */
#q1, #q2, #q3, #q4 {display: inline-block;}
/* Set a width for the labels of the first input fields in each row */
#q1 label, #q3 label {width: 150px;}
/* Hide the labels of the second input fields in each row */
#q2 .cf-label, #q4 .cf-label {display: none;}

/* Make the 1st element in each row half the width of the row, plus half of the label width */
#q1, #q3 {width: calc(50% + 75px);}
/* Make the 2nd element in each row half the width of the row, less half of the label width */
#q2, #q4 {width: calc(50% - 75px);}

/* Make most of the elements take up all of the space allocated to them */
#q1 .cf-medium, #q2 .cf-field, #q2 .cf-medium, #q3 .cf-medium,
#q4 .cf-field, #q4 .cf-medium {width: 100% !important;}
/* Because of inheritance, simply setting the first input fields to width 100%
   would cause them to shift to the next line. So instead, adjust for label width. */
#q1 .cf-field, #q3 .cf-field {width: calc(100% - 150px); !important;}

Hope this helps!

1-CustomCodeDesigner.png (18.11 KB)

| Download

2-FillOutForm.png (13.13 KB)

| Download

3-FormSubmission.png (10.27 KB)

| Download

4-SavedPDF.png (29.21 KB)

| Download

0 0

replied on June 29, 2016

Great stuff, thanks very much for that James.

0 0

You are not allowed to follow up in this post.

Question

Question

Form read-only/pdf changes field layout

Answer

Replies

Sign in to reply to this post.