[SalesForce] How to style a checkbox in a Visualforce page using Lightning Design System

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.

Best Answer

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);
}

Related Solutions

[SalesForce] Fixed page header in Lightning Design System

I don't think there is an SLDS class specifically that enables scrolling, however an easy way to enable this using standard CSS is to do the following:

<style>
    .scrollable {
        height: 400px; <!-- Don't need this if it's okay for height to be dynamic -->
        overflow-y:auto;
    }
</style>

<div class="slds-page-header">
    <p class="slds-text-heading--label">Contacts</p>
    <h1>My Contacts</h1>
</div>
<div class="scrollable">
    <!-- The rest of the page goes here -->
</div>

EDIT: As @techbusinessman wrote in a comment below, there is now a standard utility class for making a div scrollable. The documentation can be found here: https://www.lightningdesignsystem.com/components/utilities/scrollable/#overview

The code would now be as follows:

<div class="slds-page-header">
    <p class="slds-text-heading--label">Contacts</p>
    <h1>My Contacts</h1>
</div>
<div class="slds-scrollable">
    <!-- The rest of the page goes here -->
</div>

[SalesForce] How to retain flex display order using Lightning Design System in a VF page while renderAs=”pdf”

Finally it's been figured out, now i can keep the flexbox display order as well as CSS in my Vf page.

I've taken reference from the following website.

http://ulmdevice.altervista.org/pdfapihtml5/#documentation

Here's the code.

<apex:page showHeader="false" 
           standardStylesheets="false" 
           sidebar="false" 
           docType="html-5.0"
           >    

    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    

        <head>
            <title>Gate Deliverable Report</title>
            <apex:stylesheet value="{!URLFOR($Resource.SLDS, 'styles/salesforce-lightning-design-system-vf.css')}" />
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        </head>    

        <body>    

            <!-- REQUIRED SLDS WRAPPER -->
            <div class="slds" id="main">   
                <div class="slds-grid slds-wrap">
                  <div class="slds-col slds-size--1-of-1 slds-order--4">1</div>
                  <div class="slds-col slds-size--1-of-1 slds-order--1">2</div>
                  <div class="slds-col slds-size--1-of-1 slds-order--2">3</div>
                  <div class="slds-col slds-size--1-of-1 slds-order--3">4</div>
                </div>
            </div>
            <!-- / REQUIRED SLDS WRAPPER -->    
            <a href="#" onclick="htmlpdfimg()">Get PDF</a>
        </body>    

        <!-- Download jsdpdf.debug.js from https://github.com/MrRio/jsPDF -->
        <script type="text/javascript" src="/resource/html2pdf/jspdf.debug.js"></script>
        <!-- Download canvg project from https://code.google.com/p/canvg/ -->
        <script type="text/javascript" src="/resource/html2pdf/vendor/rgbcolor.js"></script>
        <script type="text/javascript" src="/resource/html2pdf/vendor/StackBlur.js"></script>
        <script type="text/javascript" src="/resource/html2pdf/vendor/canvg.js"></script>
        <!-- Download html2canvas project from http://html2canvas.hertzen.com/ -->
        <script type="text/javascript" src="/resource/html2pdf/html2canvas.js"></script>
        <!-- Include javascript library in your file html -->
        <script type="text/javascript" src="/resource/pdfUtil"></script>

        <script>

            function htmlpdfimg(){
              var imghtml = 'main';
              var orientation = "p";
              var unitmeasure = "mm";
              var q1 = 297;
              var q2 = 210;
              var m1 = 5;
              var m2 = 5;
              HTMLPDFimg(imghtml, orientation, unitmeasure, q1, q2, m1, m2);
            };
        </script>
    </html>
</apex:page>

Here's the video demo.

https://www.youtube.com/watch?v=zT5G6OyoK_s

Thanks

Best Answer

Related Solutions

[SalesForce] Fixed page header in Lightning Design System

[SalesForce] How to retain flex display order using Lightning Design System in a VF page while renderAs=”pdf”

Related Topic