2

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>

  • Thanks for the suggestion but no sadly this does not fix it – Jay Dec 10 '19 at 12:40
  • 1
    You trying to achieve :- developer.salesforce.com/docs/component-library/tools/… ?? – Sahil Malhotra Dec 10 '19 at 14:55
  • Yes something similar, only I can't use float right since the fields are within the lightning-record-form fields – Jay Dec 10 '19 at 15:32
  • Can you send me full code so that i can work upon it. Thanks – Sahil Malhotra Dec 10 '19 at 15:36
2

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);

|improve this answer|||||
  • 1
    Thanks Calvin. Following your advise I inspected the page in devTools and could see a whole load SLDS styling being adding (such as truncating etc..). Using the above or switching to lightning record edit form and itemising each field works. Thanks again – Jay Dec 11 '19 at 9:43

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.