Question: dropdowns on bootstrap4's cards gets cut and is not visible...

[Tadek Teleżyński]

Hey all,
Amazing library! I set it all up in minutes and it works impressively well! 👏

I have one issue though and I wonder if there is some workaround (I'm more of a backend dev myself and am not very creative when it comes to frontendy stuff, so I'd gladly appreciate some help here).

The thing is I'm using shuffle on a columns inside a row and inside each column, I have a bootstrap's card element and inside this card's body I have a dropdown element.

Now this dropdown usually when expanded is hanging partially outside the card's body, but with shuffle.js applied this dropdown gets cut to the card's initial body dimensions and hence is mostly not visible...

Here is an overview of an example html markup:

<div class="row my-shuffle-container" id="grid">
  <div class="grid__brick col-sm-6 col-lg-4 col-12 p-0 p-md-3">
    <div class="card bank-card mb-4 mb-md-2" data-name="some-name" data-pk="1">
      <div class="card-body">
        <div class="dropdown">
          <a class="card-link dropdown-toggle delicate-link" data-toggle="dropdown" aria-haspopup="true"
             aria-expanded="false"
             href="#"
             data-target="editMenu1">
            Export</a>
          <div class="dropdown-menu" id="editMenu1">
            <a class="dropdown-item" href="#">Duplicate</a>
            <a class="dropdown-item" href="#">Rename</a>
          </div>
        </div>
      </div>
    </div>
    <div class="card bank-card mb-4 mb-md-2" data-name="some-name2" data-pk="2">
      <div class="card-body">
        <div class="dropdown">
          <a class="card-link dropdown-toggle delicate-link" data-toggle="dropdown" aria-haspopup="true"
             aria-expanded="false"
             href="#"
             data-target="editMenu2">
            Export</a>
          <div class="dropdown-menu" id="editMenu2">
            <a class="dropdown-item" href="#">Duplicate</a>
            <a class="dropdown-item" href="#">Rename</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

[Tadek Teleżyński]

I think this is related to stacking contexts and how z-index is calculated... (see https://philipwalton.com/articles/what-no-one-told-you-about-z-index/) the dropdowns work well when the position of the columns is unsorted (ie originally rendered)

[KingBier]

this is exactly what I am experiencing.

in my script where shuffle instance is created, the following parameter needs to be set false:
useTransforms: false

in combination with css overflow:unset !important for the containing grid div and will-change:unset !important for each card div it somehow fixed it..