function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Justin DenningJustin Denning 

checkbox-group with multiple columns

I'm wold like a checkbox-group to span multiple columns rather than a single column vertically.  

The following worked adding the style manually in Chrome, but not when added to the LWC .css file. What should my .css file be to make this work? 
.slds-form-element__control {
    display: inline-grid ;
    grid-template-columns: 1fr 1fr 1fr ;
}

 
Joy Das 19Joy Das 19

Hi @justin,

Did you get the answer to this?
I am looking for a way to acheive this similar scenario.

 
Justin DenningJustin Denning
I got it to work by adding the .css to a static resource named LWCBaseComponentOverrides and calling platformResourceLoader (https://developer.salesforce.com/docs/component-library/bundle/lightning-platform-resource-loader/documentation) to load it.  It looks like Salesforce may have made styling LWCs easier using styling hooks (https://www.lightningdesignsystem.com/platforms/lightning/styling-hooks/) since I first asked the question.  But here's my solution from a couple years ago.


LWC .js 
import { loadStyle } from "lightning/platformResourceLoader";

//Static Resource named LWCBaseComponentOverrides is a zip file that has a file named override.css within it.
import styleOverrides from "@salesforce/resourceUrl/LWCBaseComponentOverrides";
.
.
.
// call platformResourceLoader to get the css file
loadStyle(this, styleOverrides + "/override.css");


LWC .html 
<lightning-checkbox-group name="Checkbox Group" label="Select countries"
                               options={countries} onchange={handleChange} value={selectedCountries} class="multiselect">
                           </lightning-checkbox-group>


override.css  
c-your_LWC_name_here lightning-checkbox-group .slds-form-element__control  {
    clear: left;
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr  1fr 1fr;
}