Bootstrap bug

Wrong navbar container positioning when a modal is opened

by Valerie Bailey

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<div class="modal fade" id="exampleModal" tabindex="-1">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">modal</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Adjust the height of the preview pane. The modal jumps position slightly to the left.</p>

        <p>Solution: _adjustDialog() should be called as soon as the modal is opened to prevent it jumping.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis volutpat mauris, at rutrum neque porttitor ac. Sed facilisis magna id ligula elementum tincidunt in et sem. Morbi efficitur efficitur euismod. Aliquam erat volutpat. Duis vulputate
  purus et dapibus gravida. Cras suscipit gravida consequat. Sed pharetra dui sed felis tristique sodales. Phasellus id ligula dignissim, vestibulum leo vitae, volutpat dolor. Vivamus condimentum ex eget dolor varius, eget placerat felis cursus. Mauris
  et aliquam mauris. Suspendisse maximus quam at ipsum bibendum bibendum. Donec nec sapien luctus, bibendum nulla elementum, egestas nulla. Integer dolor nisi, scelerisque id vehicula a, suscipit vel ex. Integer sodales nisi nec lorem sollicitudin...

JavaScript

setTimeout(function() {
  $("#exampleModal").modal();
}, 2000);