Rich Text Alignment with Checkbox | Community
Skip to main content
J
JCKevin
Level 3
July 11, 2019
Question

Rich Text Alignment with Checkbox

  • July 11, 2019
  • 1 reply
  • 4296 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

Dave_Roberts
Dave_Roberts
Level 10
July 13, 2019

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.

J
Justin_Morris
Level 2
August 16, 2019

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. 

SanfordWhiteman
SanfordWhiteman
Level 10
August 17, 2019

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");
    });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Terms & ConditionsAccessibility statement

Loading footer...