5

While using lightning-input-field within a lightning-record-edit-form in a LWC, I noticed that multi-picklist fields don't respect their default visible lines setting. It always seems to show 4. I've tried this on its own and within a lightning-layout as well.

Is there an easy way to have it display more than 4 lines? I can see that using a dual-listbox directly allows you to set a size attribute to control this, but when using lightning-input-field you don't seem to have this type of control.

I can set the height of the lightning-input-field to be larger, but the picklist options don't dynamically auto-fill the extra height.

<lightning-input-field field-name="multiPicklist_field__c" style="height: 20rem;" >

enter image description here

It doesn't seem likely I can directly influence the height of the duallistbox as it's within the lightning-input-field.

0

Was able to accomplish this with a combo of

  1. Setting the style directly on the lightning-input-field for the multi-picklist in the html with a `style="height: 25rem;" (as noted in the question)
  2. Loading a CSS file from a static resource that defines a height on .slds-dueling-list__options with !important to override the style="height:10rem;" being set directly on that class

Create a .css file with the following:

.slds-dueling-list__options {
    height: 20rem !important;
}

Upload it as a static resource, then import and load the style in your javascript

import dualListBoxHeight from '@salesforce/resourceUrl/dualListBoxHeight';
import { loadStyle } from "lightning/platformResourceLoader";
....

    renderedCallback() {
        Promise.all([
            loadStyle(this, dualListBoxHeight )

        ])
        .catch(error => {
            //handle error
        });
    }

I made differing heights on lightning-input-field vs. the list options to give proper space between the options and the start of the next lightning-input-field.

| improve this answer | |

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.