What CSS would be required to make the items in a lightning:checkboxGroup display horizontally rather than the default of vertical?
-
3what have you tried so far?? using some CSS you can change the appearance as per your requirement..– Sagar HinsuMay 21, 2018 at 7:33
Add a comment
|
2 Answers
<!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>
-
1How 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). Jun 7, 2018 at 7:37
-
-
Thank you! It would be even better with some explanation and a screenshot :) Jun 7, 2018 at 16:23
-
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;
}