I am using the lightning:combobox standard component, and created a little UI that I then put in a modal window.

It looks fine except for this issue....

enter image description here

I the drop down hides inside the modal content area, and extends the length of the modal so there is a lot of white space beneath my buttons.

I want no white space beneath my buttons. I do not want the drop down menu to extend the length of anything.

Preferably I'd like it to just extend off of the modal, like how the blue highlight is. Does anyone know how to modify the CSS of the drop down to get such a thing to happen? I have been messing with the css a little bit, but so far nothing helped.

If that is not possible, is it possible to make its max height based on the modal so it doesn't extend out of view?

All it is is a basic

<lightning:combobox name="blah" options="{!v.myOptions}" aura:id="someId" label="some label" onchange="{!c.handleChange}" />

That gets instantiated inside a modal in another lightning component:

<div role="dialog" aria-labelledby="modal-title" aura:id="field-dependency-modal" class="slds-modal">
    <div class="slds-modal__container">
        <div class="slds-modal__header">
            <button class="slds-button slds-modal__close slds-button_icon-inverse" onclick="{!c.closeEditor}"> 
                <lightning:icon iconName="utility:close" alternativeText="Close" />
            <div class="slds-modal__content slds-p-arround_medium">
                <c:FieldDependencies someId="{!v.someId}" />
<div class="slds-backdrop" aura:id="field-dependency-modal-backdrop"></div>

is the component that contains the combobox.

So it has nothing more than the standard stylings it comes with so far.

  • Try setting the overflow behavior of the modal – gNerb Sep 5 '18 at 22:26
  • Yeah, I think that will be necessary, but hiding the overflow of the modal content just hides the drop down behind it like it did before, but now I can't scroll the modal down to get to the bottom drop down values – Tyler Dahle Sep 5 '18 at 22:28
  • Try setting it to visible, I would not recommend scroll or hidden. You may need !important as SF stylesheets are jerks some times. – gNerb Sep 5 '18 at 22:30
  • Oh, it is normally set to visible. My issue with that is you then have extra space at the bottom of the modal. The drop down extends it past my buttons. I don't particularly like that. I want no extra space after my buttons. Not entirely sure it's possible, though. – Tyler Dahle Sep 5 '18 at 22:35
  • In that case you'll probably have to do something like setting the position to relative and setting a high z index or something so that it's always on top and seperate from the normal flow. If relative doesn't work absolute should but that requires the parent element to have a non-default position attribute (set the parent to relative but don't re-position it at all) and it requires you to position your list manually. – gNerb Sep 5 '18 at 22:36

Ugh, I finally found the culprit. The drop down was absolute positioned, but applying a higher z-index was not doing anything.

It turns out it was the overflow options of the slds-modal__container. They had to be 'unset' completely.

So doing a

.THIS .slds-modal__content{
    overflow: initial;

on my lightning component solved it.

enter image description here

| improve this answer | |
  • 2
    I just had this same issue on a modal in LWC. Your solution works perfectly, thanks. – PatMcClellan__c Jun 4 '19 at 15:30
  • Is this supposed to work with LWC or Aura component only? I have the same issue ending up using simple html select option – Shinya Koizumi Mar 24 at 6:06
  • 1
    This solution is from using it in an Aura component @ShinyaKoizumi. However, it may still hold true for doing this in LWCs? Not entirely sure. But LWCs don't let you override built in component CSS (like if you were using lightning-select or whatever it is and wanted to override that drop down part of it). – Tyler Dahle Mar 24 at 14:53
  • Oh man you just saved me a TON of time! thanks! – Yonathan Goriachnick Apr 1 at 11:06
  • 2
    @TylerDahle you can just use the same css but without ".THIS". It worked great for my lwc component. – Yonathan Goriachnick Apr 1 at 12:05

Maybe a simple solution by setting the z-index?

.THIS .slds-listbox {
    z-index: 9002; // I believe .slds-modal is 9001

Other solution could be to set a min-height of your modal-content div and a fixed height of your combobox.

If this doesn't help then please share all your code so I can do some testing in a sandbox.

| improve this answer | |

For those wondering, this can work for LWC, as well. To bubble up from the comments as I just confirmed this works...

.THIS .slds-modal__content{
    overflow: initial;

Appreciate the help!

| improve this answer | |

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.