2

I have found that the lightning-combobox seems to get created with the default slds-dropdown_length-10 styling class. I want to reduce this drop down height, but so far cannot find a way to do so.

Wrapping a div with a set height around the lightning-combobox did nothing. Giving the lightning-combobox a class of slds-dropdown_length-5 did not provide nice results, I see no attribute to set in the documentation.

Did Salesforce seriously, for real, default the drop down to 10 items and provide NO way of modifying it for their LWC component? I find that entirely unbelievable... But I haven't found a way to do it from testing various css to trying to Google a workaround.

3 Answers 3

1

You cannot style the inner elements of the components if they're not exposed because of shadow DOM. But you can copy the open source version of the component and adapt it to your needs.

0

You can use .THIS .slds-form-element__control{ height:3rem }

0

Yes, it is possible

constructor() {
    super();
    const style = document.createElement('style');
    // below you specify the CSS selector to be changed in the combobox
    style.innerText = `.slds-listbox.slds-listbox_vertical.slds-dropdown.slds-dropdown_fluid.slds-dropdown_left {
        height: 220px !important;
    }`;
    document.querySelector('head').appendChild(style);
}

Or you can change necessary CSS params from static resource

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .