I'm trying to create a scrollable dropdown menu which doesn't extend past the current modal. I tried setting the max-height to 200 and overflow:scroll; but that didn't work. I added height:200px but that made a large gap between the current field and next fields (see picture). How can I make the dropdown only extend to about 200px without requiring to change the height?

css class:

.THIS .restrictDropdownHeight {
    z-index: 10 !important;
    max-height: 200px;
    height: 200px;
    background-color: blue;
    overflow-y: scroll;

html (within combo box):

<lightning:layoutItem flexibility="auto"  size="12" largeDeviceSize="6" mediumDeviceSize="12" padding="horizontal-small">
                        <lightning:combobox aura:id="eSTypes" class="restrictDropdownHeight" label="Engagement Sub Types" variant="standard" options="{!v.engagementSubTypes}" disabled="true" messageWhenValueMissing="Engagement Sub Type is required"/>


enter image description here

  • please share your current approach, it will be easier to provide feedback (provide code please). Thanks =) – glls Aug 7 '18 at 23:50

Try this:


<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">

    <aura:attribute name="options" type="List" default="[
                                                        {'label': 'Label1', 'value': 'Label1'},
                                                        {'label': 'Label2', 'value': 'Label2'},
                                                        {'label': 'Label3', 'value': 'Label3'},
                                                        {'label': 'Label4', 'value': 'Label4'},
                                                        {'label': 'Label5', 'value': 'Label5'},
                                                        {'label': 'Label6', 'value': 'Label6'},
                                                        {'label': 'Label7', 'value': 'Label7'},
                                                        {'label': 'Label8', 'value': 'Label8'},
                                                        {'label': 'Label9', 'value': 'Label9'},
                                                        {'label': 'Label10', 'value': 'Label10'},
                                                        {'label': 'Label11', 'value': 'Label11'},
                                                        {'label': 'Label12', 'value': 'Label12'},
                                                        {'label': 'Label13', 'value': 'Label13'},

    <lightning:input name="someInput" value="This will, obviously, be not affected by combobox below."/>
    <lightning:combobox name="progress" label="Status" value="inProgress" placeholder="Select Progress" options="{! v.options }" onchange="{! c.handleChange }"/>
    <lightning:input name="anyInput" value="Will this be pushed down?"/>



.THIS .slds-dropdown-trigger .slds-dropdown {
    height: 200px;
    overflow: auto;


enter image description here


enter image description here

  • Hey thanks @Kal for the feedback. that didn't work. The height: 200px causes a gap in between the elements, but I don't want a gap. I want the dropdown menu to be a max of 200px but show overtop of the other elements – tom_12321 Aug 8 '18 at 3:13
  • Works for me, see screenshots in my answer above... could you be running into an interference from existing CSS? If so, please try creating a new component. – Lightning Evangelist Aug 8 '18 at 11:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.