SOLVED

Center Checkbox on Form

Go to solution
Anonymous
Not applicable

Center Checkbox on Form

Hi,

We are creating a form with the label positions on the left and the field on the right. For the checkboxes, we want to override this styling and have the field (checkbox) below the label and centered for our desktop and mobile verison. Our checkbox currently is left aligned. Does anyone have a solution for this?

1 ACCEPTED SOLUTION

Accepted Solutions
Grégoire_Miche2
Level 10

Re: Center Checkbox on Form

Hi Amanda,

I gave it a look and in fact, I understand where your problem comes from : there is no class, hook nor id that enables to format the label for checkboxes separately form the other labels in the form.

It will likely require some JS scripting to dynamically add a class or id to this "mktoFormCol" element so that you can apply some specific CSS to the label and the checkbox.

I am not that good at scripting

Sanford Whiteman​ may know better

-Greg

View solution in original post

9 REPLIES 9
Grégoire_Miche2
Level 10

Re: Center Checkbox on Form

HI Amanda,

This can be done using CSS styling either on the form, or in the LP template.

-Greg

Anonymous
Not applicable

Re: Center Checkbox on Form

Hi,

Yes, I know this. I'm not sure of the CSS code though. Can you provide this code?

Grégoire_Miche2
Level 10

Re: Center Checkbox on Form

Hi Amanda,

I gave it a look and in fact, I understand where your problem comes from : there is no class, hook nor id that enables to format the label for checkboxes separately form the other labels in the form.

It will likely require some JS scripting to dynamically add a class or id to this "mktoFormCol" element so that you can apply some specific CSS to the label and the checkbox.

I am not that good at scripting

Sanford Whiteman​ may know better

-Greg

SanfordWhiteman
Level 10 - Community Moderator

Re: Center Checkbox on Form

Post the URL and I'll post the JS/CSS code you need.

I typically add a data- attribute to each .mktoFormRows element so you can seek based on the field(s) inside.

Anonymous
Not applicable

Re: Center Checkbox on Form

Hi Sanford,

I'm going to send you the link via message, but it says you need to be following me or we need to be friends. Can you please follow me and I'll send over the link?

Thanks,

Amanda

SanfordWhiteman
Level 10 - Community Moderator

Re: Center Checkbox on Form

Followed!

SanfordWhiteman
Level 10 - Community Moderator

Re: Center Checkbox on Form

Try this:

.mktoForm .mktoCheckboxList {

     float: none;

     clear: both;

     position: relative;

     top: 5px;

     left: 50%;

     margin-left: -1.5em;

}

Anonymous
Not applicable

Re: Center Checkbox on Form

Hi Sanford Whiteman, being a coding pro, could you help me make the label text on the checkbox field, align with the actual checkbox itself please? I've tried a few things but can't seem to get it to align. Any tips would be really appreciated! Landing page here: Argus Media  

Thanks

SanfordWhiteman
Level 10 - Community Moderator

Re: Center Checkbox on Form

Can you reset to the default CSS, start a new Community thread, and show me exactly what you mean by "align" (mark up a screenshot)?