bootstrap4 dropdown tether

by 719media

HTML

<link rel="stylesheet" property='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>

<div class="container">
  <div class="help">
    The first example in the red box is the bootstrap 4.0.0-alpha.2 default dropdown.
  </div>
  <div style="height:100px;overflow:auto;border:solid 1px red;">
    <div class="dropdown pull-xs-left">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <a class="dropdown-item" href="#">Action long words to show content</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>

    <div class="dropdown pull-xs-right">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
        <a class="dropdown-item" href="#">Action long words to show content</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>
  </div>


  <div>
    <br/>
    <br/>
    <br/>
    <br/> This is just creating some space so we can more easily see what happens when the dropdown is near the bottom of the viewport, and the dropdown would normally open over the edge of the viewport. (Resize your window if necessary).
   ...

JavaScript

$('.dropdown-tether-example').on('show.bs.dropdown', function(e) {
  var $this = $(this);
  
  if(! $this.data('_tether')) {
    var $dropdownButton = $this.find('.dropdown-toggle');
    var $dropdownMenu = $this.find('.dropdown-menu');
    
    //we do this here on first attach, so that the element is showing before attaching, which will make the constraints work on load without having to reposition
    $dropdownMenu.css({
      'display': 'block'
    });
    
    $this.data('_tether', new Tether({
      element: $dropdownMenu[0],
      target: $dropdownButton[0],
      attachment: 'top left',
      targetAttachment: 'bottom left',
      constraints: [{
        to: 'window',
        attachment: 'together',
        pin: true
      }]
    }));
  }
  
  var $dropdownMenu = $($this.data('_tether').element);
  $dropdownMenu.css({
    'display': 'block'
  });

}).on('hidden.bs.dropdown', function(e) {
  var $this = $(this);
  var $dropdownMenu = $($this.data('_tether').element);
  $dropdownMenu.css({
    'display': 'none'
  });
});