[SalesForce] How to use all column width in slds Grid

I'm using lightning-record-form to build a simple To-Do style checklist. The functionality all works fine however the checklist fields are only using 25% of the column space. Is there a way to fix this?

I have tried adjusting the density parameter this did not work. I have also tried using CSS with width: 100%. The only thing that works is to have 1 column which is not acceptable since I need to two checklists side by side.

Ideally, the checkboxes will all be aligned on the right of the labels.

Thanks in advance,

enter image description here

Here's the code:

<template>

<lightning-card variant="narrow">

<div class="slds-m-around--medium slds-grid slds-gutters">
    <div class="slds-col slds-size_1-of-2">
        <div class="slds-box">
            <lightning-progress-bar value={cmProgress} size="large" class="slds-p-around--medium"></lightning-progress-bar>
            <h4 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Panel Header">Case Management</h4>
            <lightning-record-form object-api-name={objectApiName} record-id={recordId} fields={cmFields} class=slds-p-around--medium density="comfy" mode="Edit"></lightning-record-form>
        </div>
    </div>
    <div class="slds-col slds-size_1-of-2">
        <div class="slds-box">
            <lightning-progress-bar value={cmProgress} size="large" class="slds-p-around--medium"></lightning-progress-bar>
            <h4 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Panel Header">Heavy Refurb</h4>
            <lightning-record-form object-api-name={objectApiName} record-id={recordId} fields={hrFields} class=slds-p-around--medium density="comfy" mode="Edit" ></lightning-record-form>
        </div>
    </div>
</div>
</lightning-card>

Best Answer

The shadow dom is preventing you from overriding the default width of the fields rendered in the record form. The current workaround is to either load the style in the rendered callback as a static resource or to override the css classes like so in the js file of the lwc. 

renderedCallback() {
   const style = document.createElement('style');
   style.innerText = `c-hello-world.slds-card__header {
   background-color: #54C2B2;
}`;
this.template.querySelector('lightning-record-form').appendChild(style);

}

where c-hello-world is the name of your lwc, the .slds-card__header is whatever css class you are trying to override (inspect the page using chrome/firefox to determine what is causing the 1/3 spacing and override that class);

Related Topic