0

Preferably without using JavaScript.

This is my code using the SLDS, but the field value doesn't change or get set.

<div class="slds-form-element">
    <div class="slds-form-element__control">
        <span class="slds-checkbox">
            <apex:inputCheckbox html-name="options" id="divsup" html-checked="{!myobject.field__c}" value="{!myobject.field__c}"></apex:inputCheckbox>
            <label class="slds-checkbox__label" for="divsup">
                <span class="slds-checkbox--faux"></span>
                <span class="slds-form-element__label">Checkbox Label</span>
            </label>
        </span>
    </div>
</div>

Has anyone been able to style the checkbox correctly?

In this case I was trying to rerender a outputPanel when the checkbox changes, but I didn't post the actionsupport used (because I noticed that the checkbox wasn't even clickable anymore).

I want to be able to style a checkbox, and listen for changes so I can rerender a panel.

  • does an outer element have the scope class? – Jesse Milburn Feb 23 '17 at 17:12
  • Outer elements have "slds", "slds-grid", "slds-col" tags, and other slds align classes too. The whole page is styled, actually. – Renato Oliveira Feb 23 '17 at 17:18
  • do you have another css on the page that could be overriding it? I just copied your code and it looks like it should. – Jesse Milburn Feb 23 '17 at 17:31
  • No, the page is using just the SLDS. Have you tried using a rerender on the checkbox? – Renato Oliveira Feb 23 '17 at 17:38
  • I did not, as there is no mention of rerender being part of the problem. – Jesse Milburn Feb 23 '17 at 17:48
4

Sometimes you have to change the SLDS example to work correctly with Visualforce.

Visualforce depends on the input field having a specific "id" attribute, so the id of the checkbox is actually something like "j_id0:j_id2:divsup". This means the <label> element used by SLDS doesn't match your checkbox.

You have to use <apex:outputLabel> so Visualforce can match the ids of the label and the checkbox.

<div class="slds-form-element">
    <div class="slds-form-element__control">
        <span class="slds-checkbox">
            <apex:inputCheckbox html-name="options" id="divsup" html-checked="" value="{! isChecked}"></apex:inputCheckbox>
            <apex:outputLabel for="divsup" styleClass="slds-checkbox__label">
                <span class="slds-checkbox--faux"></span>
                <span class="slds-form-element__label">Checkbox Label</span>
            </apex:outputLabel>
        </span>
    </div>
</div>

Or if that doesn't work, you can fix-up these different ids when the page loads with this little bit of JavaScript.

var labels = document.querySelectorAll("input[type='checkbox'] + label");
for (var label of labels) {
    var checkbox = label.parentNode.querySelector("input");
    label.setAttribute("for", checkbox.id);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.