Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Bootstrap 4 dropdown menu appears behind other elements

Tags:

jquery

css

twitter-bootstrap

bootstrap-4

I´m having problems with bootstrap 4 dropdown menu, if there is enough space and the dropdown is opened from bottom to top all menu appears fine, but if the menu is opened from top to bottom some menu items do appear behind the other divs. How can I fix that and why it happens only in a certain case? I tried with position relative and z-index but it doesn´t work.

Update: @ZimSystem answer is fine, but it didn´t fix my problem, so I have updated my code to faithfully reproduce the issue I was facing.

Here is the simplified code:

$(document).ready(function() {
    $('.container').hover(function() {
        if (!$(this).find('.card').hasClass('flipped')) {
            $(this).find('.card').toggleClass('flipped')
        }
        $(this).find('.card').addClass('hovered');
    }, function() {
        var val = $(this).find('.card');
        $(this).find('.card').removeClass('hovered');
        setTimeout(function() {
            if (!val.hasClass('hovered')) {
                val.removeClass('flipped')
            }
        }, 1000);
    });

});
.dropdown{
    width: 100% !important;
    margin-top: 30% !important;
}
.dropdown a{
    width: 100% !important;
}
.dropdown-item{
    color: black !important;
}
.dropdown-menu{
    height: auto !important;
}

.container {
  width: 150px !important;
  height: 150px;
  float: left;
  position: relative;
  margin: 3% 2.25% 0 2.25%;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
}


.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -o-transform-origin: right center;
  transform-origin: right center;
}

.card.flipped {
  -webkit-transform: translateX( -100%) rotateY( -180deg);
  -moz-transform: translateX( -100%) rotateY( -180deg);
  -o-transform: translateX( -100%) rotateY( -180deg);
  transform: translateX( -100%) rotateY( -180deg);
}

.card div {
  height: 100%;
  width: 100%;
  color: white;
  text-align: center;
  font-weight: bold;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  cursor: pointer;
}

.card .front {
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}


.card .back {
  background: blue;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div id="main"><br>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink1">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>


<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink3">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>


<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink4">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>



<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink5">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>



<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink6">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink7" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink7">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink8" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink8">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

</div>
like image 911
SilverSurfer Avatar asked Mar 26 '18 14:03

SilverSurfer

2 Answers

Updated answer (based on bounty request)

The problem is that the transform-style: preserve-3d; on the .card is breaking the z-order on the dropdown. When popper.js dynamically positions the dropdown, it adds translate3d(x,x,0) CSS to the dropdown.

Since the z-order is set to 0, the dropdown is hidden by all the other cards which have transform-style: preserve-3d; used for the flip animation. In order for the dropdown-menu to have proper z-order it must also be position with translate3d...

.dropdown {
   margin-top: 30%;
   transform-style: preserve-3d;
   transform: translate3d(0,0,10px) !important;
}

.dropdown-menu{
    height: auto !important;
    position: relative !important;
    transform: translate3d(0,0,10px) !important;
}

Also, z-order won't work using translate3d unless the parent elements also have transform-style: preserve-3d;. So, in this case transform-style: preserve-3d; must be added to all the parent elements (#main, .container, .back, .test, and .dropdown)..

Working Demo on Codeply

Original answer

The z-index: 99999 !important; on all .dropdown causes the lower row to overlay the dropdown of the upper row. Remove the z-index...

.dropdown{
    width: 100%;
    margin-top: 30%;
}

Positioning of the dropdown is now controlled by popper.js which does some unexpected things. Try using data-flip="false" to prevent the dropdown from overlaying it's own button.

https://www.codeply.com/go/R0ePzWnvPC

.test{
    width: 150px;
    height: 150px;
    margin: 3% 2.25% 0 2.25%;
    float: left;
    background-color: lightgrey;
    position: relative;
    perspective: 800;
}
.dropdown{
    width: 100% !important;
    margin-top: 30% !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" data-flip="false" class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
      </div>
   </div>
</div>

<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" data-flip="false" class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
      </div>
   </div>
</div>
<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" data-flip="false" class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
      </div>
   </div>
</div>

<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" data-flip="false" class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
      </div>
   </div>
</div>


<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" data-flip="false" class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
      </div>
   </div>
</div>


<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" data-flip="false" class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 9</span></a>
      </div>
   </div>
</div>


<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" data-flip="false" class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
      </div>
   </div>
</div>

<div class="test">
   <div class="dropdown">
      <a title="Tu Voto" class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
         <a class="dropdown-item"><span>Test Dropdown 2</span></a>
         <a class="dropdown-item"><span>Test Dropdown 3</span></a>
         <a class="dropdown-item"><span>Test Dropdown 4</span></a>
         <a class="dropdown-item"><span>Test Dropdown 5</span></a>
         <a class="dropdown-item"><span>Test Dropdown 6</span></a>
         <a class="dropdown-item"><span>Test Dropdown 7</span></a>
         <a class="dropdown-item"><span>Test Dropdown 8</span></a>
         <a class="dropdown-item"><span>Test Dropdown 1</span></a>
      </div>
   </div>
</div>
like image 179
Zim Avatar answered Nov 18 '22 21:11

Zim

It is kinda hack, I have wrapped all section in a div with float-left class and change the float of .container to right.

$(document).ready(function() {
    $('.container').hover(function() {
        if (!$(this).find('.card').hasClass('flipped')) {
            $(this).find('.card').toggleClass('flipped')
        }
        $(this).find('.card').addClass('hovered');
    }, function() {
        var val = $(this).find('.card');
        $(this).find('.card').removeClass('hovered');
        setTimeout(function() {
            if (!val.hasClass('hovered')) {
                val.removeClass('flipped')
            }
        }, 1000);
    });

});
.dropdown{
    width: 100% !important;
    margin-top: 30% !important;
}
.dropdown a{
    width: 100% !important;
}
.dropdown-item{
    color: black !important;
}
.dropdown-menu{
    height: auto !important;
}

.container {
  width: 150px !important;
  height: 150px;
  float: right;
  position: relative;
  margin: 3% 2.25% 0 2.25%;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
}


.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -o-transform-origin: right center;
  transform-origin: right center;
}

.card.flipped {
  -webkit-transform: translateX( -100%) rotateY( -180deg);
  -moz-transform: translateX( -100%) rotateY( -180deg);
  -o-transform: translateX( -100%) rotateY( -180deg);
  transform: translateX( -100%) rotateY( -180deg);
}

.card div {
  height: 100%;
  width: 100%;
  color: white;
  text-align: center;
  font-weight: bold;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  cursor: pointer;
}

.card .front {
  background: red;
  display: flex;
  justify-content: center;
  align-items: center;
}


.card .back {
  background: blue;
  -webkit-transform: rotateY( 180deg);
  -moz-transform: rotateY( 180deg);
  -o-transform: rotateY( 180deg);
  transform: rotateY( 180deg);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<div id="main"><br>
<div class="float-left">
<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink1">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink2">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>


<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink3">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>


<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink4">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>



<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink5">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>



<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink6">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink7" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink7">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="container">
    <div class="card">
        <div class="front">
            <p>Test</p>
        </div>
        <div class="back">
            <div class="test">
                <div class="dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" role="button" id="dropdownMenuLink8" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Test Dropdown
      </a>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink8">
                        <a class="dropdown-item"><span>Test Dropdown 1</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 2</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 3</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 4</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 5</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 6</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 7</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 8</span></a>
                        <a class="dropdown-item"><span>Test Dropdown 9</span></a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>
</div>
</div>
like image 1
AG_ Avatar answered Nov 18 '22 19:11

AG_
Sign in to Comment

Related questions

Hide button in asp.net formview using jquery
Splitting a set of strings and storing in a dynamic variable
Animate an element to the size of screen in fixed position
Why '$("#form")[0].reset();' works and '$("#form").reset();' not?
Failed to execute 'animate' on 'Element': Partial keyframes are not supported
Javascript document.contains not working on IE11
Highcharts Custom tooltips for multiple series
How to get data values of a bootstrap modal using jQuery or javascript on clicking button inside the modal?
Laravel Elixir with JQuery and JQuery UI
Javascript "Equal Sequence" meaning
jquery set selected option by data-value
Detect multiple tabs or windows of the same session in a web application
Pace.js(Progress bar) for Ajax request is not working
Sending a JavaScript array to PHP via POST
how to disable drag and drop in Jquery Nestable List
How do I create a percentage counter in jQuery?
How can I use a select2 selectbox with dataTables?
Add date on image while uploading in c#
How to add another textarea when inner text of first textarea exceed one page
Laravel mix Uncaught ReferenceError: jQuery is not defined

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!