1

What CSS would be required to make the items in a lightning:checkboxGroup display horizontally rather than the default of vertical?

1
  • 3
    what have you tried so far?? using some CSS you can change the appearance as per your requirement.. May 21, 2018 at 7:33

2 Answers 2

1
<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="assets/styles/salesforce- lightning-design-system.css" />
</head>
<body>
<div class="slds-form-element">
<div class="slds-form-element__control">
<span class="slds-checkbox">
    <input type="checkbox" name="options" id="checkbox-2" value="checkbox-2" />
         <label class="slds-checkbox__label" for="checkbox-2">
            <span class="slds-checkbox_faux"></span>
            <span class="slds-form-element__label">Checkbox Check-1</span>
    </label>


    <input type="checkbox" name="options1" id="checkbox-3" value="checkbox-3" />
    <label class="slds-checkbox__label" for="checkbox-3">
            <span class="slds-checkbox_faux"></span>
            <span class="slds-form-element__label">Checkbox Check-2</span>
        </label>
</span>
</div>
</div>
</body>
</html>
4
  • 1
    How are we supposed to 'use' this code? It would be much better to paste the code here; make sure to indent it by 4 spaces to make sure it's readable (hit Ctrl + K or the 'Code Sample' button in the editor).
    – Glorfindel
    Jun 7, 2018 at 7:37
  • Does it resolve your issue? Jun 7, 2018 at 16:21
  • Thank you! It would be even better with some explanation and a screenshot :)
    – Glorfindel
    Jun 7, 2018 at 16:23
  • I asked for CSS not HTML. This answer does not help, please delete.
    – Robs
    Jun 11, 2018 at 14:03
1

The CSS required to make the checkbox options display horizontally rather than vertically:

.THIS .slds-checkbox {
    display: inline !important;
}

To be added to the lightning component CSS

Note, you can achieve the same thing for radio button options using:

.THIS .slds-radio {
    display: inline !important;
}

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.