Question

Stop auto-complete custom HTML

Forms

Updated August 7, 2014

asked on July 29, 2014

I was wondering if there is a way to prevent the auto-completion of custom HTML within forms. I am trying to shorten a form and I am trying to implement a custom HTML table in order to do this for a specific section of my form. I attempted to use CSS for this section though since there are single line boxes that appears after the field I want is checked off. The box floats to the left side of the page. I wanted to create a table cell so that everything for that specified section/item is aligned. Is there any way to keep forms from auto-completing my custom HTML section?

0 0

Answer

APPROVED ANSWER SELECTED ANSWER

replied on August 7, 2014

Ok, let's go with foundation.css, since it won't conflict with the styling in the Form Designer (using boostrap here can produce some odd effects).

Replace FormsServerMachine with the name of your Forms Server. Then, create your field rules as you normally would. If all went well, you should have the layout you want.

Get foundation.css here. Click Download Essentials.
In the .zip file, open the CSS folder and extract foundation.css.
Put foundation css in your Forms install directory here: C:\Program Files\Laserfiche\Laserfiche Forms\Forms\js
Open the form you're working on in Forms. Right now, you've got three checkboxes and three input boxes. Make sure these fields appear in order on your form, like so:
In each checkbox, add check large-4 columns as CSS classes.
For each single line field, add large-4 columns group1 as CSS classes.

On the CSS and JavaScript page, insert the following CSS:

.check >.cf-label {display:none;}
.group1 .cf-label, .group1 .cf-field, .group1 .cf-medium {width:100% !important;}

and JavaScript:

$(document).ready(function() {
  $('head').append('<link rel="stylesheet" href="http://FormsServerMachine/forms/js/foundation.css" type="text/css" />');
});

0 0

Replies

replied on July 31, 2014

So if I understand this, you want to use an HTML table to format the various fields in the form to align and be presentable within a certain size screen with not much to scroll through?

I would highly recommend not using HTML this way, it will really destroy the form once completed and make it uneasy to edit the fields. Instead, you should use CSS Classes and CSS to modify the look of the fields. You will be able to accomplish everything you want that way and it will not limit you in the future.

Here may be a good place to start:

http://www.laserfiche.com/support/webhelp/laserficheforms/9.1/en-us/forms/#FormsCSS.htm#Displayingfieldssidebyside

0 0

View 2 previous replies

replied on July 31, 2014

The main issue is I am using checkboxes that reveal hidden fields in the form. I am using css to do align everything though it is a specific section that I am having trouble with. The reason for this is that when the check box is checked the field to fill is is not aligned with the checkbox that should be overhead. I think my best case would be to use javascript to change the css when the checkbox is checked.

Before.PNG (7.75 KB)

| Download

After.PNG (8.78 KB)

| Download

0 0

replied on July 31, 2014

Oh, I see.....interesting.

Yes, you may wish to set up javascript to evaluate those checkboxes and change up the CSS in those situations.

Another way would be to have hidden custom HTML fields with nothing inside them that you have CSS classes assigned to. Then when you have our hide and show rules, you change up the ones that should be displayed. In the example you show in the screenshots, you would have two blank fields to the left of the currency field. In the CSS, you include these extra fields, and it will only be applied to whatever is being shown anyways, so you wont need to worry about extra javascript running to change up CSS.

You will then need to hide the extra blank fields based on which other checkboxes are checked or not checked. It wouldn't be too difficult, as you just set one of the blank fields to hide when the credit memo is not selected, and the other field to hide when the expense report option is not selected.

0 0

replied on August 6, 2014

In the After picture you want the Amount field under the Tires checkbox? What CSS are you using to align those checkboxes?

0 0

replied on August 6, 2014 • Show version history

#q42, #q44, #q45
{ 
  display: inline-block;
  width: 30%; 
}

I am also adding a capture to show the order in which they come in as well.

Capture.PNG (10.8 KB)

| Download

0 0

replied on August 6, 2014

I feel confused by that last image. The fields you want to display when the various options are selected need to be after all three of the items on the same line.

If you want to have the fields line up, you will need something like,

#q42, #q44, #q45 {
   display: inline-block;
   width: 30%;
}

Then, assuming that #q1 will be what appears after #q42 is selected, #q2 appears when #q44 is selected, and #q3 appears when #q45 is selected. Also, #q4 is an empty HTML field that hides when Expense Report is selected, #q5 is also an empty HTML field that hides when #q44 is selected

#q1, #q4, #q2, #q5, #q3 {
 display: inline-block;
 width: 30%;
}

Setting things up that way, we enable the hide rules to control which three fields are displayed and taking up 30% of that row.

The fields should be ordered as follows:

I am using numbers 1-5 for my own simplicity, but they will be whatever the field numbers are when you set it up, just change them accordingly. Remember, I am saying fields 4 and 5 should be HTML fields with nothing being displayed, just something to take up space when the other field is not meant to be displayed.

0 0

replied on August 6, 2014

hi there,

Based on my understanding, you want to show and hide fields based on the checkbox option selected.

1. you can design 3 checkboxes instead of 1 with 3 choices, so that you can create singleline field under each of them.

2. why you want 3 checkboxes to be side by side? is there a specific reason?

0 0

replied on August 7, 2014

I believe they already are using three checkboxes and using CSS to display them side-by-side.

I believe the conversation is centered around properly justifying the fields that appear underneath the 3 checkboxes as they would like them to align with the checkbox it pertains to.

I have not tested, but believe my recommendation of custom HTML fields and the CSS I provided should give the requested functionality. It also relies on show/hide rules configured so that we never have a situation that fields 1 and 4 are both being shown on the form, and 2 and 5 are not being shown at the same time on the form. Should work on every possible browser that works with forms in general since we arent even using javascript to do anything custom.

0 0

replied on August 7, 2014

This particular layout is a little problematic. If you display fields side-by-side using display:inline-block, those fields will still be visible (though disabled) even when hidden by field rules.

I recommend using an alternative layout, perhaps the checkboxes should be on their own lines with input boxes appear next to them.

If you really want to implement this layout, try a CSS layout framework like bootstrap. Without using a framework like this, you'll probably need a significant amount of JavaScript to get this working. If you're interested in going that route, I can give you more information that will help you get started.

0 0

replied on August 7, 2014

I'll look into using into trying bootstrap. If you can provide and tips on using bootstrap before I get started that would be appreciated. To answer Abby's question the reason why I want to do this is that the form was very long and the customer didn't want a very long form and a more aesthetic look to it.

0 0

APPROVED ANSWER SELECTED ANSWER

replied on August 7, 2014

Ok, let's go with foundation.css, since it won't conflict with the styling in the Form Designer (using boostrap here can produce some odd effects).

Replace FormsServerMachine with the name of your Forms Server. Then, create your field rules as you normally would. If all went well, you should have the layout you want.

Get foundation.css here. Click Download Essentials.
In the .zip file, open the CSS folder and extract foundation.css.
Put foundation css in your Forms install directory here: C:\Program Files\Laserfiche\Laserfiche Forms\Forms\js
Open the form you're working on in Forms. Right now, you've got three checkboxes and three input boxes. Make sure these fields appear in order on your form, like so:
In each checkbox, add check large-4 columns as CSS classes.
For each single line field, add large-4 columns group1 as CSS classes.

On the CSS and JavaScript page, insert the following CSS:

.check >.cf-label {display:none;}
.group1 .cf-label, .group1 .cf-field, .group1 .cf-medium {width:100% !important;}

and JavaScript:

$(document).ready(function() {
  $('head').append('<link rel="stylesheet" href="http://FormsServerMachine/forms/js/foundation.css" type="text/css" />');
});

0 0

You are not allowed to follow up in this post.

Question

Question

Stop auto-complete custom HTML

Answer

Replies

Sign in to reply to this post.