1

I am trying to create a filter popup window with multiple fields, but when dropdown opens up it is hiding behind the buttons, and user is unable to scroll through, how do we bring it on top always?

enter image description here

Html:

 <section class="slds-popover slds-nubbin_top-left" role="dialog">
            <button class="slds-button slds-button_icon slds-button_icon-small slds-float_right slds-popover__close"
                title="Close dialog" onclick={closePopover}>
                <lightning-icon icon-name="utility:close" alternative-text="Close" title="Close" size="small"
                    onclick={handleClose}></lightning-icon>
            </button>
            <header class="slds-popover__header">
                <div class="slds-media slds-media_center slds-has-flexi-truncate">
                    <div class="slds-media__figure">
                        <span class="slds-icon_container">
                            <lightning-icon icon-name="standard:calibration" alternative-text="Error" title="Error"
                                size="x-small">
                            </lightning-icon>
                        </span>
                    </div>
                    <div class="slds-media__body">
                        <p class="slds-text-heading_small">{header}</p>
                    </div>
                </div>
            </header>
            <div class="slds-popover__body slds-scrollable_y">
                <div class="element-to-move-front">                    
                    <template if:false={isClickedFromSeat}>
                        <p>
                            <c-picklist-values-utility object-api-name="Engagement__c"
                                selected-value={selectedReadinessRating} field-api-name="Internship_Readiness_Rating__c"
                                name="readiness" picklist-label="Internship Radiness Rating"
                                onselected={handlePicklistValueSelected}>
                            </c-picklist-values-utility>
                        </p>
                        <p>
                            <c-picklist-values-utility object-api-name="Site__c" name="matchingGroup"
                                selected-value={selectedGroup} field-api-name="MATCH_Matching_Group__c"
                                picklist-label="Matching Group" onselected={handlePicklistValueSelected}>
                            </c-picklist-values-utility>
                        </p>
                    </template>
                </div>
            </div>
            <!--Seat Filters-->
            <!--Seat Filters-->
            <footer class="slds-popover__footer">
                <p>
                    <lightning-button variant="brand" label="Submit" title="Primary action" onclick={handleSubmit}
                        class="slds-var-m-top_small"></lightning-button>
                    <lightning-button variant="brand-outline" label="Clear" title="Primary action"
                        onclick={handleClearAll} class="slds-var-m-top_x-small slds-var-m-left_x-small">
                    </lightning-button>
                </p>
            </footer>
        </section>

css:

.element-to-move-front {
    z-index: 99999; /* set higher z-index value */
    position: relative; /* position must be set for z-index to work */
  }

1 Answer 1

1

z-index is always relative to the parent element when positioned. That means that you can set the z-index as high as you want, and it will never go over.

Here's a simple copy-paste example:

<div class="div1">
  <div class="div2">
    <div class="div3">
      Content
    </div>
  </div>
  <div class="div4">
    More Content
  </div>
</div>
.div1 {
  position: relative;
  width: 100%;
  border: 1px solid red;
  height: 4em;
}
.div2 {
  position: absolute;
  top: 0.5em;
  vertical-align: middle;
  z-index: 1;
  left: 1em;
  background: green;
}
.div3 {
  z-index: 1000;
  height: 1em;
}
.div4 {
  z-index: 2;
  position: absolute;
  background: blue;
}

Which looks like:

Example of CSS from above

As you can see, Content is covered by More Content, even though it "should" (at first glance), be above everything else!

Instead, make sure that you set a max-height for the dropdown so that it doesn't reach the bottom footer area.

You must log in to answer this question.

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