Bootstrap 4 - Dropdowns

[VaclavElias]

Hi,

I have got 2 Bootstrap cards, each inside its Animate component. The top card has Bootstrap 4 drop down menu. This menu opens underneath the second card. This is caused by Animate component as it works outside Animate or rather the way how Animate and Bootstrap dropdown works.

I think, it has got something with transforms. When I disabled them in Dev Tools, the menu appears on the top.

I am now trying to figure out if I need to change somehow css Bootstrap dropdown, or use completely different dropdown implementation, or change Blazor.Animate css.

Any suggestions?

Thank you.

Update 1: Not very helpful ..., if I add this on the Animate div. It fixes the problem, sort of on that card, the problem is that my cards are dynamic components so the other (3rd, 4th) card on the top would have same z-index so it wouldn't work.

    z-index: 1;
    position: relative;

Update 2: Possible solution, but I don't know about other implications and consequences :( .

I have replaced this transform: translateZ(0); with transform: none; and it seems working now

    [data-aos^=fade][data-aos^=fade].aos-animate {
        opacity: 1;
        /*transform: translateZ(0);*/
        transform: none;
    }