How to overlap a picklist field dropdown over a lightning card in LWC?

Question

I have tried inserting the below css,

.table-responsive,
.dataTables_scrollBody {
   overflow: visible !important;
}

But still it does not work.

When i use a dropdown picklist field over a modal, the below css helps, but not in lightning card

.slds-modal__content{
    overflow: initial;
}

score 0 · Answer 1 · answered Nov 05 '21 at 08:35

There are a few things to notice here, like Model is Positioned Element but lightning-card is not.

So you cant expect the exact behavior of Model from lightning-card. But with some CSS changes, we can achieve it.

1] If your dropdown is an immediate child of lightning-card you can add following element as the last immediate child of lightning-card.

<div class="slds-scrollable" style="height:30rem">

2] You can add a custom class to the lightning card and apply the following CSS.

.custom-class{
  position: relative;
  overflow: auto;
}

1 Answers1