JSFiddle - React, Tailwind, and code Playground

by GlittenBerg

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="bs-example">
  <div class="athing">


    <div class="dropdown">
      <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        Dropdown trigger
        <span class="caret"></span>
      </a>

      <ul class="dropdown-menu" aria-labelledby="dLabel">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
      </ul>
    </div>
  </div>
</div>

CSS

body {
  width: 100%;
}

.bs-example {

padding: 10px 20px 5px;
  width: 100%;
  height: 40px;
  border: 1px solid black;
  overflow: hidden;


}

.dropdown {
  margin: 0 auto;
}

TypeScript

$('.dropdown').on('show.bs.dropdown', function() {
  $('body').append($('.dropdown').css({
    position: 'absolute',
    left: $('.dropdown').offset().left,
    top: $('.dropdown').offset().top
  }).detach());
});

$('.dropdown').on('hidden.bs.dropdown', function() {
  $('.bs-example').append($('.dropdown').css({
    position: false,
    left: false,
    top: false
  }).detach());
});