Twitter Bootstrap Modal Opening/Closing Causes Fixed Header to Jump

Twitter Bootstrap modal opening/closing causes fixed header to jump

I seemed to have found a quick fix for my issue. It uses a piece of javascript to add extra style to the header (15px padding-right) to prevent it from jumping.
This might not be the best solution but for now it works just fine.

Since there were no issues on viewports smaller than 768px (mobile) this piece of code only adds the extra 15px to larger viewports such as desktops and laptops

<script>

    $(document).ready(function(){

        // Dirty fix for jumping scrollbar when modal opens

        $('#requestModal').on('show.bs.modal', function (e) {
            if ($(window).width() > 768) {
                $(".navbar-default").css("padding-right","15px");
            }
        });

        $('#requestModal').on('hide.bs.modal', function (e) {
            if ($(window).width() > 768) {
                $(".navbar-default").css("padding-right","0px");
            }
        });

    });

</script>

If you know a better solution (preferably CSS3 only), please let me know.
Thanks for all the help!

Is it possible to have a fixed header inside a long modal with no scrollbars or fixed height on the modal?

This is your CSS rule that needs a change:

.modal .modal-body {
    height: 500px;
    overflow: auto;
}

Remove the height:500px; and the modal will expand taller than the viewport giving its scrollbar to the <body> element.

Update: For a fixed header you can move the .modal-header element that is inside .modal-content to be just before .modal-dialogue. Then add padding-top: 60px; to the rule above and add the following rule for the header (Demo):

.modal-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 17px;
    z-index: 10;
    background: white;
}

Bootstrap modal: background jumps to top on toggle

When the modal opens a modal-open class is set to the <body> tag. This class sets overflow: hidden; to the body. Add this rule to your stylesheet to override the bootstrap.css style:

body.modal-open {
    overflow: visible;
}

Now the scroll should stay in place.

Using Bootstrap's model, .modal-header and .modal-footer not working

You have a typo in your HTML, it's modal-header and modal-footer not model-header and model-footer.

.modal-header {  min-height: 16.43px;  padding: 15px;  border-bottom: 1px solid #E5E5E5;}.modal-footer {  padding: 15px;  text-align: right;  border-top: 1px solid #E5E5E5;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /><div class="modal" style="display:block;">  <div class="modal-dialog">    <div class="modal-content">      <div class="modal-header">        <button type="button" class="close"></button>        <h4 class="modal-title">Modal title</h4>      </div>      <div class="modal-body">        This is the body      </div>      <div class="modal-footer">        <button type="button" class="btn btn-default">Close</button>      </div>    </div>  </div></div>

Bootstrap 3 modal fires and causes page to shift to the left momentarily / browser scroll bar problems

this is what i found in github when i search about this problem and for me it works fine

js:

    $(document).ready(function () {
    $('.modal').on('show.bs.modal', function () {
        if ($(document).height() > $(window).height()) {
            // no-scroll
            $('body').addClass("modal-open-noscroll");
        }
        else {
            $('body').removeClass("modal-open-noscroll");
        }
    });
    $('.modal').on('hide.bs.modal', function () {
        $('body').removeClass("modal-open-noscroll");
    });
})

css use this css if you have nav-fixed-top and navbar-fixed-bottom:

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

or user this css if you have navbar-default

body.modal-open-noscroll 
{
  margin-right: 0!important;
  overflow: hidden;
}
.modal-open-noscroll .navbar-default, .modal-open .navbar-default 
{
  margin-right: 0!important;
}

Twitter Bootstrap Modal Opening/Closing Causes Fixed Header to Jump