Help with understanding Checkbox CSS

SELECTED ANSWER

replied on May 4, 2023 • Show version history

I know I've already mentioned this on one of your posts, so you already know it. But for the sake of any other users that may read this in the future, you are referring to version 11.0 Update 2, not version 11.2, which does not exist at this time (but may in the future).

For future reference, the easiest way to reference your version is to go to Help > About in Forms and copy the version number (You're probably on or near version 11.0.2201.20436).

Regarding your question of if there is any difference with CSS in the two designers. Yes, there is. Because the structure of the form from the Forms Classic Designer is very different than the structure of the Forms Layout Designer - any CSS (or Javascript for that matter) that works for one, will not work for the other without modifications).

Here's some CSS that I reuse on every single Classic Designer form that I create:

/*set re-usable field layouts*/
.hiddenField {display: none!important;}
.noLabel .cf-label {display : none;} 
.fivePercentWidth {display : inline-block; width : 5%;}
.fivePercentWidth .cf-field {min-width : 5px;}
.fifteenPercentWidth {display : inline-block; width : 15%;}
.fifteenPercentWidth .cf-field {min-width : 80px;}
.tenPercentWidth {display : inline-block; width : 10%;}
.tenPercentWidth .cf-field {min-width : 80px;}
.quarterWidth {display : inline-block; width : 25%;}
.thirdWidth {display : inline-block; width : 33%;}
.halfWidth {display : inline-block; width : 50%;}
.fortyEigthPercentWidth {display : inline-block; width : 48%;}
.twentyFourPercentWidth {display : inline-block; width : 24%;}
.threeQuarterWidth {display : inline-block; width : 75%;}
.dateField {display : inline-block; width : 25%;}
.dateField .cf-xlarge {width : 80%;}
.twentFourPercentDateField {display : inline-block; width : 24%;}
.twentFourPercentDateField .cf-xlarge {width : 80%;}
.wideLabel .cf-label {width : 300%; max-width : 300%;} 
.alignTop {vertical-align: text-top;}

These are a series of class names that can be applied to fields on the form in order to easily layout the structure of the form. Your stated goal:

So my current goal is to simply create a checkbox and have a multiline comments field inline with the multiline comment label ontop of it.

Here's how I would tackle that:

On the Layout Page > Form Settings - change the label alignment from Left to Top.
Add your checkbox field and give it the CSS Class Names of quarterWidth and alignTop.
Add your multi-line field and give it the CSS Class Names of threeQuarterWidth and alignTop. Set this field size to be Extra Large so that it fills the full width of the field.

You'll see from the CSS above that those classes are set-up to reduce the maximum width of the fields, so instead of spanning the full screen, they only span a portion of it, and their display value is changed to inline-block. The alignTop class also aligns the contents of the field up to the top, so the row of fields looks aligned across the top of them.

The result should look something like this:

Your screenshot showed the checkbox field without a label, and @████████' comment including hiding the label. The CSS I shared above has an option for that, with the noLabel class. Adding that to the checkbox looks like this:

Here's another fun thing to do with labels. Let's say I have a longer label that really applies to multiple fields. I'll add the long title to the first field, and include the wideLabel class, which will allow that label to exceed the width of the field. Then the second field, I'll leave the label blank. I won't include the noLabel class, because I want the spacing for the label to remain. It looks like this:

This doesn't look exactly right, so I would probably mess around with it a bit more, and maybe create a new CSS Class just for that multi-line field on this form, but it kind of gives you an idea of how this stuff can work.

3 0

replied on May 4, 2023

This is off topic of your question. But here's another example of using those CSS Classes to structure the form in more flexible ways. This is one that I use a lot, and makes use of several of those CSS classes from my earlier comment. I know there is a built-in address block, but I find I prefer the flexibility of my own fields, and here's how I always set them up:

Address Line 1 - Label says "Please Enter the Full Mailing Address of the Customer" or something like that. X-Large Width. Text Above Field is: Address Line 1. Field is required. Has CSS Class Names: "halfWidth wideLabel"
Address Line 2 - Label is left blank. X-Large Width. Text Above Field is: Address Line 2. Field is optional. Has CSS Class Names: "halfWidth".
City - Label is left blank. X-Large Width. Text Above Field is: City. Field is required. Has CSS Class Names: "halfWidth noLabel".
State - Label is left blank. X-Large Width. Text Above Field is: State. Field is required. Has CSS Class Names: "quarterWidth noLabel".
Zip Code - Label is left blank. X-Large Width. Text Above Field is: Zip. Field is required. Has CSS Class Names: "quarterWidth noLabel".

The fields have to be Extra Wide so that they fill the full space of their new width, which is 25% or 50% of the form width. The city, state, and zip have noLabel class so that they are closer to the fields above them. It looks like this:

I know this has nothing to do with your actual question - but I wanted to show more of the flexibility of CSS in the Classic Designer to structure the layout of fields.

2 0

replied on May 4, 2023 • Show version history

I want to address the other part of your question in more detail - because people helped so much here on LFAnswers when I started, and I'm always trying to pay that forward. Your question was :

First problem I am having is getting rid of the space in the check box. In my understanding the 'element' is Q5, which is defined in blue in the image. I also understand the space (red line) is padding, however my code only seems to reduce vertical padding. What am I missing here?

You are right in that screenshot that q5 is the ID of the field. All fields in Forms are automatically assigned a q-id value, which is an easy way to identify them specifically. When writing it in CSS or JQuery, the # symbol is used to refer to the ID of an element. Similarly, the . symbol is used to refer to items by their class name.

One thing to remember, is that the field is a collection of items. On the classic designer, eveything is contained within an li element, and this is what is actually assigned the q-id identifier. Within that li element will be a label element, an input/select/textarea element, and various other elements for text above, text below, parsley errors, etc.

When you add a CSS Class Name to a field and refer to that class name to reference the field(s), or you reference a field by its q-id, you are actually referencing the li element that the entire field lives within, not the actual input/select/textarea element itself. Those are given a different id that is based on the q-id. In a field with a q-id of q6 for example, the actual input/select/textarea element will have an id of Field6.

Most fields (single line, currency, checkbox, radio button, email, etc.) will have an input element. Multi-line fields will have a textarea element. Drop-down fields will have a select element. That is why, if you are trying to reference the actual field element, you need to either refer to the Field-id value, or refer to the input/select/textarea element underneath the q-id or class name. Like this partial Javascript code:

$('#q6 input').val()
$('#q6 select').val()
$('#q6 textarea').val()
$('#Field6').val()
$('.className input').val()
$('.className select').val()
$('.className textarea').val()

You were not correct that the spacing around the chexbox element in your screenshot was padding. By default, the fields in the Classic designer - specifically that top-level li element - are set to fill 100% of the form width. In your screenshot, the area to the left of the checkboxes was the label, it has a set-width when displayed on the left like that, or will be the full width of the li element when displayed on the top. The area to the right of your checkbox was just unused space, simply based on the fact that the fields (the input elements and their associated labels) were not wide enough to fill the full space. With other fields, like single-line fields, it'll ask for field width (Small, Medium, Large, X-Large) and that is dictating what percentage of that width of the li element to fill-up, but anything to the right is just empty space that is still part of that li element. There is some padding around the fields, it just wasn't the part you were referring to.

Using the CSS I shared in my other comment, the classes like halfWidth, quarterWidth, thirdWidth, etc. are all modifying that top-level li element to set its width to something other than 100% of the form's width (50%, 25%, 33%, etc.) They also change the display from block to inline-block, which allows them to be shown side-by-side. At that point, everything within the li element (label, input/select/textarea, etc.) is all shrunk to a new percentage of that full width. So setting halfWidth means the li element is 50% of the form width, and if your field is set to Medium width (which is 50% of the field), the actual input element is now 25% of the form width (50% of 50%). That is why in the examples when I used those halfWidth, quarterWidth, thirdWidth, etc. classes, I said to use X-Large field width, so that it filled the entirely of that new width.

I hope this, and the other comments help you gain a better understanding of how the forms are structured and the ways they can be manipulated to meet your needs.

I would be more than happy to go into additional detail on any parts of this that do not make sense or that you'd like additional information/clarification. And I know a lot of other users here on LFAnswers would be happy to as well.

Have a good day!

3 0

Question

Question

Help with understanding Checkbox CSS

Answer

Replies

Sign in to reply to this post.