Question

Forms "Save To Repository" loses formatting

Forms Version 10

Updated March 15, 2019

asked on May 24, 2018

We created a form and once we added our CSS to give the form a nice layout we noticed the layout of the file that is saved to the repository is really messed up. Here's what the form looks like with the CSS:

This is what the file that is saved to repository looks like:

This is the form with no CSS just a modified theme.

This is what the file saved to the repository looks like when there is no CSS in the form.

.cf-formwrap {
    margin: 0 auto 0;
  	max-width: 100%;
}
.cf-form li {
    list-style-type: none;
    display: inline-table;
}
.cf-medium {
    width: 100%;
}
.margin-end {
    display: none;
}
.cf-col1 span.choice {
    width: auto;
}
.sectionLable {
    font-family:Arial;
    font-weight:normal;
    font-style:normal;
    text-decoration:none;
    color:#107b83;
    font-size:18px;
}
.cf-collection-append {
    color: #107b83;
}
.cf-field input[type="text"], .cf-field select {
    height: auto;
}
input, textarea {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 5px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
}
.seventy {
	max-width: 70%;
}
    

#Field20_old {
    color: #ffffff;
    font-family: Arial;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    border-color: #107b83;
    background: #107b83;
    border-width: 1px;
    border-style: solid;
}
li.BusPurp {
    display: block;
  max-width:70%;
}
#Field20_old:hover, input.Submit[type='submit']:hover {
        background: rgba(16, 72, 77, 1);
    }

.edit_button {
   margin-left: 10px !important;
   padding-bottom: 3px !important;
   padding-top: 3px !important;
   margin-bottom: 0;
   font-weight: bold;
   border-color: #107b83;
   background: #107b83;
   border-width: 1px;
   border-style: solid;
   border-radius: 5px;
}

.edit_button p {
   margin: 0;
}

.edit_button a:link {
   color: #FFF;
   text-decoration: none;
}

.edit_button:hover {
    background: rgba(16, 72, 77, 1);
}

@media screen and (max-width: 640px), handheld and (max-width: 640px), tv and (max-width: 640px), projection and (max-width: 640px) {
  .lf-responsive .cf-field span.margin-end {
    display:none;
  }
  .seventy {
    max-width: 100%;
  }
  .cf-form li {
    display: block;
  }
  .lf-responsive .cf-field .currency {
    width: 100%;
  }
  li.BusPurp {
    display: auto;
    max-width:100%;
  }
}

@media print {
  .cf-formwrap {
    margin: auto;
  	max-width: 900px !important;
  }
  .cf-form li {
      list-style-type: none;
      display: inline-block;
      float: left;
  }
  .lf-responsive .cf-field .currency {
    width: auto;
  }
  .cf-medium {
    width: auto;
  }
  li.BusPurp {
    max-width:auto;
  }
    .seventy {
  max-width: auto;
  }
}


#errortext {
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  display: block;
  font-weight: bold;
  margin-bottom: 1.11111rem;
  padding: 0.77778rem 1.33333rem 0.77778rem 0.77778rem;
  position: relative;
  background-color: #f04124;
  border-color: #de2d0f;
  color: #FFFFFF;
}

I found this Laserfiche Answer: https://answers.laserfiche.com/questions/57981/Save-to-Laserfiche-As-Tif-Form-Width?sort=oldest. As you can see from our CSS we do have the @media print and within it we change anything with a width back to a default and the .cf-formwrap which seems to be the root cause of the havoc to 900px. However, the CSS in the @media print seems to be ignored when the form is saved to the repository. I then found this Answer: https://answers.laserfiche.com/questions/85488/Forms--Spacing-between-form-elements-changes-when-submitted-to-the-repository. I followed all of the suggestions on how to troubleshoot what the form looks like on print and in the print emulation it looks fine. If I try to print from the browser to a PDF it also looks fine. It's only when the form gets saved to the repository that it is all messed up. I found yet another Answer: https://answers.laserfiche.com/questions/125060/Forms-not-saving-to-repository-correctly#. But how would I view the read-only form as its being created into the repository? How do I adjust my CSS to affect the read-only form when I am not able to see it? We even removed all of the CSS and added back just this:

.cf-formwrap {
  margin: 0 auto 0;
  max-width: 100%;
}

@media print {
  .cf-formwrap {
    margin: auto;
    max-width: 964px;
  }
}

However we got the same results. The file in the repository is unreadable as you see above. It's like the save to repository process is totally ignoring the @media print CSS. What do I need to do to correct this?

0 0

Answer

SELECTED ANSWER

replied on March 15, 2019

What I did was created a duplicate of my form and used different CSS styles from the form used to display in the browser. This allowed me to use a different them and styling to look more like a paper form rather than a screenshot of an online form.

0 0

Replies

replied on May 24, 2018 • Show version history

There are two sets of CSS that you need to create. One is for fields in edit mode, and the other is for fields in read-only mode. It's the read-only version that is used to persist the form to the repository. You can see what this looks like when you are editing the form, by clicking the preview button.

It will allow you to fill out the form and submit it, and it will then show you what the read-only version looks like.

You can check out the documentation to see what you need to add for your CSS to apply to the read-only fields. Go to the page I linked and scroll down to the green note box.

I'll also paste it here in case the linked content changes.

Note: Read-only fields use different HTML elements to represent them than normal fields. To change the CSS of read-only fields, you may need to use attribute selectors. For example, to change the background color of read-only text boxes, you would use: [type="text"], [type="number"], [type="email"], [type="button"], textarea, or select { background-color: #eeeeee !important} instead of input { background-color: #eeeeee;}. Use [type="text"] with single-line, date, currency, and address fields, use [type="number"] with number fields, use [type="button"] with signature and file upload fields, and use [type="email"] with email fields. Use textarea with multi-line fields, and select with drop-down fields.

Example: To change the background color of a read-only single line field use: #qN [type="text"] {background-color: #eeeeee !important}

You should be able to add the needed selectors to the rules that you already have defined. There's no need to have duplicate CSS.

6 0

replied on May 29, 2018

I've read that but that doesn't make sense to me. If you look at our CSS none of the styles that directly target an <input> that would be a <div> in a read-only version of the form are vastly changed by the CSS. Most of it is just padding and border. Also, the one CSS style that is causing us the most trouble is the max-width in the cf-formwrap. What confuses me is if I attach the form as a PDF in the email notification when the form is assigned to a User Task it looks just fine:

So, if the Laserfiche Forms application is able to create this readable PDF file for an attachment to an email why is it not able to create one to save to the repository? Shouldn't it be using the same PDF creation module? Just to recap the new image above is what the PDF email attachment with all of our CSS as part of the form.

0 0

You are not allowed to follow up in this post.

Question

Question

Forms "Save To Repository" loses formatting

Answer

Replies

Sign in to reply to this post.