Styling lightning:combobox drop down to not hide inside modal and extend modal length?

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.

Answer

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

Attribution
Source : Link , Question Author : Tyler Dahle , Answer Author : Tyler Dahle

Leave a Comment