18

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
  • 1
    Try setting the overflow behavior of the modal
    – gNerb
    Commented Sep 5, 2018 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 Commented Sep 5, 2018 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
    Commented Sep 5, 2018 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. Commented Sep 5, 2018 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
    Commented Sep 5, 2018 at 22:36

4 Answers 4

39

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

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

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;"> Commented Apr 19, 2021 at 17:09
  • 5
    it does work for LWC but you don't need the .THIS and should be removed from your answer
    – ghiscoding
    Commented Jun 30, 2021 at 15:27
5

add dropdown-alignment="auto" attribute to lightning-combobox:

Example

    <lightning-combobox
    label="Cancel Reason"
    value={selectedValue}
    options={options}
    onchange={handleReasonChange}
    dropdown-alignment="auto">    
1
  • Out of the solutions here, this is the change I found to work the best. For reference, it looks like adding this attribute to the component will force a calculated z-index, and fixed position onto the drop down. This is similar to how lightning-input-field does it within a lightning-record-edit-form. Commented Dec 7, 2022 at 16:06
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.

You must log in to answer this question.

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