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>
<nav class="navbar sticky-top navbar-expand bg-dark navbar-dark">
  <div class="container">
    <a class="navbar-brand" href="#">logo</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse-navbar">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="collapse-navbar">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">page 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">page 2</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<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">
        ...
      </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>

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...

CSS

/*
Expand the result pane so that the navbar container is not squished
(i.e. there is spome empty space on the left before "logo")

Fix: apply the following code when the modal is opened
.sticky-top { margin-right: -33px; }
(where the right-padding is 33px)

*/

JavaScript

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