I'm new to LWC and I have lots of values that should be displayed in the dropdown (in other smaller dropdowns it's not occurring) it is important because the values are sorted alphabetically from the top and should be displayed by that. The default css given by salesforce for dropdown with icon looks like this:

.slds-dropdown_length-with-icon-10, .slds-dropdown--length-with-icon-10 {

-webkit-overflow-scrolling: touch;
max-height: calc((1.5rem + 1rem) * 10);
overflow-y: auto;


changing to overflow-y: scroll is not helping, I suspect it is about the max-height but when I canceled it the list is displayed by top as it should but obviously without the scroll option which is important.

Other things that did not help:

  • add slds-scrollable class to menu
  • adding : display: flex; flex-direction: column-reverse;
  • change the max height
  • set scroll-padding-block-start: px; to something
  • set scroll-margin-top: ; to something

I want the dropdown menu to be opened when the scroll bar is pinned to top by default. Any css that might help? js solution?

1 Answer 1


Wanted to update bug was about undefined values comes from data, and it was the js file.

  • 2
    Can you explain this a little bit more in detail? As such it's hard to understand. Dec 11, 2022 at 15:19

You must log in to answer this question.

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