0

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

  • 2
    what have you tried so far?? using some CSS you can change the appearance as per your requirement.. – Sagar Hinsu May 21 '18 at 7:33
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;
}
0
<!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>
  • 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 '18 at 7:37
  • Does it resolve your issue? – Prolay Chaudhury Jun 7 '18 at 16:21
  • Thank you! It would be even better with some explanation and a screenshot :) – Glorfindel Jun 7 '18 at 16:23
  • I asked for CSS not HTML. This answer does not help, please delete. – Robs Jun 11 '18 at 14:03

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.