Bootstrap 3 modal creates scrollbar when opened

user_1101095 0
Viewed 33466

I'm trying to use Bootstrap for the first time and am having an issue with modal dialogs. Using the example code on this page, when the modal is opened a scrollbar appears, which also shifts the content on the page to the left.

Code:

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <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" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

JSFIDDLE: http://jsfiddle.net/WqRBP/

A lot of sites I'm looking at use Bootstrap and they don't have this issue, so is there some sort of easy fix for the problem?

EDIT: The scrollbar appears in Chrome and IE, I haven't tested in other browsers.

Here's what I'm seeing in JSFIDDLE:

enter image description here

enter image description here

twitter-bootstrap-3 twitter-bootstrap
13 Answers

In this case you can overwrite bootstrap main css using your own css cause sometime may effect other. so this is simple code which work

body.modal-open .modal {
    margin-right: -15px !important;
}

body.modal-open {
    margin-right: 0 !important;
}

if you want to change main bootstrap css then update this

body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
    margin-right: 0 !important;
}
user_25580050

Try This

  .modal-open {
         overflow-y: auto
     }
user_98906530

In my case there were my own styles that caused the problem:

html {
    overflow-y: scroll;
}

You may change html to body so there is only one scrollbar:

body {
    overflow-y: scroll;
}
user_11927020
Related