How To Change Size Of Visible Dropdown Options In <lightning:combobox>

Tips/Trick/Workaround/Fix : Salesforce Lightning Component Development

lightning:combobox is an input element that enables single selection from a list of options. The result of the selection is displayed as the value of the input. by default, size of visible list of options are 5, it’s means only 5 options in list can be visible at a time. there is no standard way to control the size of visible options in lightning:combobox.

here is the workaround to change the visible options size in &lt;lightning:combobox&gt; dropdown component:

Lightning Component :

<aura:component>
    <aura:attribute name="statusOptions" type="List" default="[]"/>
    <aura:handler name="init" value="{! this }" action="{! c.loadOptions }"/>
    <lightning:combobox aura:id="selectItem" name="status" label="Status"
                      placeholder="Choose Color"
                      value="new"
                      options="{!v.statusOptions}"
                      />
</aura:component>

JavaScript controller :

({
    loadOptions: function (component, event, helper) {
        var options = [
            { value: "red", label: "red" },
            { value: "green", label: "green" },
            { value: "blue", label: "blue" },
            { value: "yellow", label: "yellow" },
            { value: "white", label: "white" },
            { value: "black", label: "black" },
            { value: "orange", label: "orange" },
          ];
        component.set("v.statusOptions", options);
    },
})

Output :

to change the height of drop down list or change the visible options size add following CSS in your component CSS tab:

.THIS .slds-dropdown--length-5{
   max-height: calc(((0.8125rem * 1.5) + 1rem) * 3) !important;
}

Output :

Just change in the number of CSS max-height property, in above sample i have use 3 for display 3 items in drop down list, you can modify it as your requirement. if you want display 7 items in list then use below CSS:

.THIS .slds-dropdown--length-5{
   max-height: calc(((0.8125rem * 1.5) + 1rem) * 7) !important;
}

check also : How to Change lightning:Icon Color In Salesforce Lightning Component

Please like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can share your thoughts  in comment box.

Happy Learning 🙂