<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>Bug - bootstrap-datetimepicker widget position</title>
    <link rel="stylesheet" href="style.css" />
    
    <script data-require="jquery" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
    <script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>
    <script src="script.js"></script>
    
    <link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css" />
    
  </head>

  <body>
    
    <div class="main-container">
      <div class="tall-space"></div>
      
      
      Date/time picker
      <div class="date">
        <input id="datetimepicker1" type="text" />
      </div>
      
      <button id="btnExpandPage">Expand this!</button>
      
      <div id="expander"></div>
    </div>
    
  </body>

</html>

// Add your javascript here
$(function(){
  $("h1").animate({
    "margin-left": "100px"
  }, "slow");
  
  $('#datetimepicker1').datetimepicker();
  
  $('#btnExpandPage').on('click', function() {
    $('#expander').toggleClass('tall-space');
  });
});
.main-container {
  position: relative;
}

.tall-space {
  height: 500px;
  background-color: #f0f0f0;
}

.relative {
  position: relative;
}