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 :

JavaScript controller :

Output :

By default 5 options are visible in list

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

Output :

for display 3 items in lightning:combobox list

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:

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 🙂

(Visited 11,244 times, 1 visits today)

7 thoughts on “How To Change Size Of Visible Dropdown Options In <lightning:combobox>”

  1. This seems to cause a problem when the lightning combobox is inside a modal. The combobox gets cut off by the modal and acts unpredictably.

  2. This is working nicely. However, I have been unable to input text into the combobox. I am not sure if I need to write any explicit code in JavaScript controller for that.

  3. I guess .slds-dropdown–length-5 class is not loaded and so this is not working. so I used below css in order to achive this.

    .THIS .slds-dropdown-trigger .slds-dropdown {

    height: 150px;
    overflow: auto;


Leave a Comment