Skip to content

Instantly share code, notes, and snippets.

@acontia

acontia/force-popper-js-offscreen.markdown

Created June 3, 2021 15:39
Show Gist options
  • Save acontia/88f50d205cd50f0a5dd4c3ad3a600d01 to your computer and use it in GitHub Desktop.
Save acontia/88f50d205cd50f0a5dd4c3ad3a600d01 to your computer and use it in GitHub Desktop.
Download ZIP
Force popper.js offscreen
Raw
index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
Raw
style.css
.dropdown{
margin-top:900px;
}
.dropdown-menu{
transform: translate3d(5px, 35px, 0px)!important;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment