CODEWITHSUNDEEP
cssbootstrap-modal
Allan
Allan

Reputation: 353

Bootstrap modal not scrolling with overflow: scroll

I added a bootstrap modal to use as terms and conditions on a website but it does not scroll. I assume it is something in my code.

I have tried setting overflow to scroll and auto, but it does not work

    <div id="tallModal" class="modal modal-wide fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Terms and conditions</h4>
      </div>
      <div class="modal-body">
        <%= render 'terms', client: @client %>
      </div>
      <div class="modal-footer">
        <button type="button" class="" data-dismiss="modal">Agree and close</button>
        <button type="button" class="" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>

CSS

.modal.modal-wide .modal-dialog {
  width: 60%;
}
.modal-wide .modal-body {
  overflow-y: scroll;
}
.modal-body {
  max-height: 70vh
}

I am testing the app on Heroku if you want to inspect the code further. https://safe-shore-24087.herokuapp.com/

Upvotes: 0

Views: 1404

Answers (1)

Johncze
Johncze

Reputation: 479

Bootstrap's modal conflicts with your parallax.js, just disable it (try to use another library or rise a bug) and it should work as intended.

Upvotes: 1

Related Questions