11

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" />
            </button>
            <div class="slds-modal__content slds-p-arround_medium">
                <c:FieldDependencies someId="{!v.someId}" />
            </div>
        </div>
    </div>
</div>
<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.

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

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

11
  • 3
    I just had this same issue on a modal in LWC. Your solution works perfectly, thanks. 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 Mar 24 '20 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). Mar 24 '20 at 14:53
  • Oh man you just saved me a TON of time! thanks! Apr 1 '20 at 11:06
  • 3
    @TylerDahle you can just use the same css but without ".THIS". It worked great for my lwc component. Apr 1 '20 at 12:05
3

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!

2
  • I wasn't able to override the CSS class, but succeeded by adding the style directly to the div: <div class="slds-modal__content " style="overflow: initial;"> Apr 19 at 17:09
  • it does work for LWC but you don't need the .THIS and should be removed from your answer
    – ghiscoding
    Jun 30 at 15:27
0

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.

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.