Rich Text Alignment with Checkbox

Highlighted

Rich Text Alignment with Checkbox

I couldn't find the specific answer I need for this. I've got a bunch of checkbox fields set up in a form, and trying to align boxes left of text. I followed instructions about deleting the label content and setting label width to 0. Then I set up rich text for each checkbox and aligned to the right of each box. The text is slightly above the box, however. Can someone tell me the CSS needed to align them precisely?

alignment.PNG

Tags (1)
3 REPLIES 3
Highlighted
Level 6

Re: Rich Text Alignment with Checkbox

Hey Kevin,

Try using the "CHECKBOXES" field type instead of checkbox. The difference is that a checkboxes' "display value" will show up to ther right of the checkbox. You can still display a label above the field if you'd like but normally those can be empty and hidden instead. Once you change your "checkbox" field to a "checkboxes" field, you'll need to copy the text that's in your label and paste it into the "Values" section in the "display value" column.

If you really wanted to adjust this with CSS instead of changing the field type, you might try adding padding/margin to the top of your .mktoHtmlText element to move them down a bit -- something like this:

form.mktoForm .mktoHtmlText {margin-top:8px !important;}

Depending on how you're positioning the rich text "labels" you might need to use padding instead of margin (ex. if you've set a negative top-margin to move them up to the same line, you might need padding instead). It might also be the case that you'll need to remove some spacing from the top of the checkbox inputs. Without seeing the live page, it's hard to guess how it's setup right now. If you'd rather go this way, I'd be happy to have a look at a live page with this form if you can post a link here. 

I'd recommend you try the checkboxes field type instead tho, it makes for one less thing to manage.

Highlighted

Re: Rich Text Alignment with Checkbox

This is also the method that we are using, and it works. However, we are using an accessibility checker and it says that having a label above a checkbox with no corresponding field is not compliant. Does anyone know if this is accurate or if this is something Marketo will be fixing in the future to meet accessibility requirements? Ideally the "label" above the checkboxes should just be a text field and not a label. 

Highlighted
Level 10 - Community Moderator

Re: Rich Text Alignment with Checkbox

Not sure what guidelines that checker is following. Sounds off-base.

AFAIK, the WCAG guidelines are that every input has a label... but not, as logical as it also sounds, the reverse: that every label corresponds to an input. Labels should of course point to a valid element, if they point to an element (which is optional). So try this to remove the for attributes that are invalid:

MktoForms2.whenRendered(function(form){
var arrayify = getSelection.call.bind([].slice),
formEl = form.getFormElem()[0],
allLabels = formEl.querySelectorAll("label");

arrayify(allLabels)
.filter(function(label){
return !formEl.querySelector("#" + label.getAttribute("for"));
})
.forEach(function(voidableLabel){
voidableLabel.removeAttribute("for");
});
});‍‍‍‍‍‍‍‍‍‍‍‍‍