Is it possible to set # of visible lines on a multi-picklist field with lightning-input-field in LWC

Question

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

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

Answer 1

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.