0

What CSS would be required to make the items in a lightning:checkboxGroup display horizontally in two or three columns?

i have tried this Css

.THIS .slds-form-element__control {
display: grid !important;
grid-template-columns: 1fr 1fr !important;}

it displays checkboxGroup horizontally and the breaks it in two columns but it's affecting other lightning:input fields layout as well.

1
  • its kind of hard to tell without seeing the HTML and a visual of the layout, current effect and desired one
    – glls
    Commented Feb 3, 2021 at 13:05

1 Answer 1

0

The following code resolved my issue.

Cmp:

 <div class=" multiSelect">
            <lightning:checkboxGroup aura:id="selectReason"
                                     required="true"
                                     label="Select Reason/s"
                                     options="{!v.options}"
                                     value="{!v.value}"
                                     onchange="{!c.handleReasonChange}"/>
            </div>

Css:

    .THIS .multiSelect .slds-form-element__control
{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .