Return to Answer

added 2 characters in body

Source Link

edited Jan 10, 2018 at 7:07

VF Page <apex:page controller="testSLDSCtrl"> <apex:slds />

<apex:page controller="testSLDSCtrl">
    <apex:slds />
    
    <div class="slds-scope">
        <apex:form>
            <fieldset class="slds-form--compound">
                <div class="slds-form-element__group">
                    <div class="slds-form-element__row">
                        <label class="slds-checkbox">
                            <apex:inputCheckbox styleClass="slds-input"
                                                value="{! alpha }"/>
                            <span class="slds-checkbox--faux"></span>             
                            <span class="slds-form-element__label">Paint</span> 
                        </label>
                    </div>
                    <div class="slds-form-element__row">
                        <label class="slds-checkbox">
                            <apex:inputCheckbox styleClass="slds-input"
                                                value="{! beta }"/>
                            <span class="slds-checkbox--faux"></span>             
                            <span class="slds-form-element__label">Carpet</span>    
                        </label>
                    </div>
                    <div class="slds-form-element__row">
                        <label class="slds-checkbox">
                            <apex:inputCheckbox styleClass="slds-input"
                                                value="{! gamma }"/>
                            <span class="slds-checkbox--faux"></span>             
                            <span class="slds-form-element__label">Lightning</span>    
                        </label>
                    </div>
                </div>
                <apex:commandButton action="{! testProperties }" value="test values" reRender="txtOutput"/>
            </fieldset>   
        </apex:form>
        <apex:outputText id="txtOutput" value="{! output }" />
    </div>
</apex:page>

VF Page <apex:page controller="testSLDSCtrl"> <apex:slds />

    <div class="slds-scope">
        <apex:form>
            <fieldset class="slds-form--compound">
                <div class="slds-form-element__group">
                    <div class="slds-form-element__row">
                        <label class="slds-checkbox">
                            <apex:inputCheckbox styleClass="slds-input"
                                                value="{! alpha }"/>
                            <span class="slds-checkbox--faux"></span>             
                            <span class="slds-form-element__label">Paint</span> 
                        </label>
                    </div>
                    <div class="slds-form-element__row">
                        <label class="slds-checkbox">
                            <apex:inputCheckbox styleClass="slds-input"
                                                value="{! beta }"/>
                            <span class="slds-checkbox--faux"></span>             
                            <span class="slds-form-element__label">Carpet</span>    
                        </label>
                    </div>
                    <div class="slds-form-element__row">
                        <label class="slds-checkbox">
                            <apex:inputCheckbox styleClass="slds-input"
                                                value="{! gamma }"/>
                            <span class="slds-checkbox--faux"></span>             
                            <span class="slds-form-element__label">Lightning</span>    
                        </label>
                    </div>
                </div>
                <apex:commandButton action="{! testProperties }" value="test values" reRender="txtOutput"/>
            </fieldset>   
        </apex:form>
        <apex:outputText id="txtOutput" value="{! output }" />
    </div>
</apex:page>

VF Page

<apex:page controller="testSLDSCtrl">
    <apex:slds />
    
    <div class="slds-scope">
        <apex:form>
            <fieldset class="slds-form--compound">
                <div class="slds-form-element__group">
                    <div class="slds-form-element__row">
                        <label class="slds-checkbox">
                            <apex:inputCheckbox styleClass="slds-input"
                                                value="{! alpha }"/>
                            <span class="slds-checkbox--faux"></span>             
                            <span class="slds-form-element__label">Paint</span> 
                        </label>
                    </div>
                    <div class="slds-form-element__row">
                        <label class="slds-checkbox">
                            <apex:inputCheckbox styleClass="slds-input"
                                                value="{! beta }"/>
                            <span class="slds-checkbox--faux"></span>             
                            <span class="slds-form-element__label">Carpet</span>    
                        </label>
                    </div>
                    <div class="slds-form-element__row">
                        <label class="slds-checkbox">
                            <apex:inputCheckbox styleClass="slds-input"
                                                value="{! gamma }"/>
                            <span class="slds-checkbox--faux"></span>             
                            <span class="slds-form-element__label">Lightning</span>    
                        </label>
                    </div>
                </div>
                <apex:commandButton action="{! testProperties }" value="test values" reRender="txtOutput"/>
            </fieldset>   
        </apex:form>
        <apex:outputText id="txtOutput" value="{! output }" />
    </div>
</apex:page>

Source Link

created Jan 10, 2018 at 6:57

Mahmood

I am not sure if you are already using <apex:slds /> and wrapping your page code inside class="slds-scope" using <body> or <div> tag or not. But below markup is working perfectly fine without problem

VF Page <apex:page controller="testSLDSCtrl"> <apex:slds />

    <div class="slds-scope">
        <apex:form>
            <fieldset class="slds-form--compound">
                <div class="slds-form-element__group">
                    <div class="slds-form-element__row">
                        <label class="slds-checkbox">
                            <apex:inputCheckbox styleClass="slds-input"
                                                value="{! alpha }"/>
                            <span class="slds-checkbox--faux"></span>             
                            <span class="slds-form-element__label">Paint</span> 
                        </label>
                    </div>
                    <div class="slds-form-element__row">
                        <label class="slds-checkbox">
                            <apex:inputCheckbox styleClass="slds-input"
                                                value="{! beta }"/>
                            <span class="slds-checkbox--faux"></span>             
                            <span class="slds-form-element__label">Carpet</span>    
                        </label>
                    </div>
                    <div class="slds-form-element__row">
                        <label class="slds-checkbox">
                            <apex:inputCheckbox styleClass="slds-input"
                                                value="{! gamma }"/>
                            <span class="slds-checkbox--faux"></span>             
                            <span class="slds-form-element__label">Lightning</span>    
                        </label>
                    </div>
                </div>
                <apex:commandButton action="{! testProperties }" value="test values" reRender="txtOutput"/>
            </fieldset>   
        </apex:form>
        <apex:outputText id="txtOutput" value="{! output }" />
    </div>
</apex:page>

Test Controller (Used only to demonstrate value setting)

public with sharing class testSLDSCtrl 
{
    public boolean gamma {get;set;}
    public boolean alpha {get;set;}
    public boolean beta {get;set;}
    public String output {get;set;}
    
    public testSLDSCtrl(){}
    
    public void testProperties()
    {
        output = 'alpha:' + alpha + ' - beta:' + beta + '-gamma:' + gamma;
    }
}

Output