SOLVED

Change label position for one field to Above

Go to solution
Jaclyn_Tan1
Level 2

Change label position for one field to Above

Is there a way to change just one field on a form to have the label position be above the checkboxes? For all of our fields, we don't use labels, we just use hint texts and set the field label to the left. But I have a new Checkboxes field that needs a label on the top. I've searched on the Community but haven't seen any CSS that is similar to my issue but am sure it can be done.

Capture.PNG

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Change label position for one field to Above

At simplest, you need

.mktoLabel.mktoHasWidth[for="WebinarSeries2018"] ~ .mktoCheckboxList {

clear: both;

}

but you'll probably want to work from

.mktoLabel.mktoHasWidth[for="WebinarSeries2018"] ~ .mktoCheckboxList {

clear: both;

margin: 8px 0 0 10px;

}

.mktoLabel.mktoHasWidth[for="WebinarSeries2018"] {

margin-left: 10px;

}

to adjust whitespace.

View solution in original post

11 REPLIES 11
SanfordWhiteman
Level 10 - Community Moderator

Re: Change label position for one field to Above

You must provide a link to your live form if you want help w/this.

Jaclyn_Tan1
Level 2

Re: Change label position for one field to Above

SanfordWhiteman
Level 10 - Community Moderator

Re: Change label position for one field to Above

At simplest, you need

.mktoLabel.mktoHasWidth[for="WebinarSeries2018"] ~ .mktoCheckboxList {

clear: both;

}

but you'll probably want to work from

.mktoLabel.mktoHasWidth[for="WebinarSeries2018"] ~ .mktoCheckboxList {

clear: both;

margin: 8px 0 0 10px;

}

.mktoLabel.mktoHasWidth[for="WebinarSeries2018"] {

margin-left: 10px;

}

to adjust whitespace.

Jaclyn_Tan1
Level 2

Re: Change label position for one field to Above

That did it! Thanks for coming to my rescue

Amit_Jain
Level 8 - Community Advisor

Re: Change label position for one field to Above

The simplest way to achive what you are try to do is by removing the label for your check boxes as well and add Rich text above these check boxes. Hope it makes sense.

Regards,

Amit

SanfordWhiteman
Level 10 - Community Moderator

Re: Change label position for one field to Above

Why is that simpler? Then the label doesn't move with the inputs, making the form setup more fragile.

Amit_Jain
Level 8 - Community Advisor

Re: Change label position for one field to Above

It's is simpler in a sense that someone who do not have CSS skill set can make it work easily. I agree that the label won't move with the input but who soever is setting up the form has to take care of it.

Jaclyn_Tan1
Level 2

Re: Change label position for one field to Above

Someone like me 🙂

I'll definitely use Rich Text in the future for other fields, maybe for T&Cs. Thanks again!

Jaclyn_Tan1
Level 2

Re: Change label position for one field to Above

Makes sense but we use guided LPs so we can't drop any right text or html onto the LP. CSS just makes more sense for us but thanks for the help!