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

Lightning Component
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 🙂


  • 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.

  • 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.

Leave a Reply