CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Lildholdt
Lildholdt

Reputation: 123

Bootstrap: Header moves when modal opens

I am using the Bootstrap framework and having some trouble with my header and modals. The header on my page is fixed and when a modal opens it moves a few pixels to the right and moves back again when the modal closes.

An example is shown here: http://jsfiddle.net/D2RLR/7400/

I would like it to not move at all. I know this is caused by the scrollbar which is why the container in the fiddle is set to 2000px. Any ideas to how I can solve this problem?

The code is the following:

HTML

<div class="container">

   <header>
    <nav id="menu" class="dl-menuwrapper">
    <a href="#" class="menu-toggle dl-trigger"><i class="fa fa-reorder"></i></a>
      <ul class="dl-menu">
        <li>
         <a href="#home" class="scroll"><i class="fa fa-home"></i>Home</a>
        </li>
        <li><a href="#profile" class="scroll"><i class="fa fa-user"></i>Profile</a></li>
      </ul>
    </nav>

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

CSS

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css');

.container {
    margin-top: 10px;
}

button {
    margin-top:100px;
}

.modal-content {
     height:500px;   
}

header {
        width: 150px;
        margin:auto;
        left:0;
        right:0;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        text-align: center;
        position: fixed;
        background-color:rgba(0, 0, 0, 0.90);
        z-index: 2;
    }

Upvotes: 6

Views: 11290

Answers (11)

Jan Holpuch
Jan Holpuch

Reputation: 11

Just add to your header class "is-fixed":

<header class="is-fixed">

This class has no efect to your design. But when the modal is open, Bootstrap will add to every element with this class somethink like that:

style="padding-right: 17px;"

where 17px is the actual width od the scrollbar. Bootstrap do the same with the body element.

<body> //close modal
<body class="modal-open" style="padding-right: 17px;"> //open modal

Upvotes: 1

bsteo
bsteo

Reputation: 1779

Works for me:

.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
    padding-right: 17px;
}

Upvotes: 0

Praveen Murali
Praveen Murali

Reputation: 741

The issue is already reported in bootstrap's repo, and I have found this solution working for me.

https://github.com/twbs/bootstrap/issues/14040

$(document).ready(function(){
    $(window).load(function(){
        var oldSSB = $.fn.modal.Constructor.prototype.setScrollbar;
        $.fn.modal.Constructor.prototype.setScrollbar = function () {
            oldSSB.apply(this);
            if(this.bodyIsOverflowing && this.scrollbarWidth) {
                $('.navbar-fixed-top, .navbar-fixed-bottom').css('padding-right', this.scrollbarWidth);
            }       
        }
        var oldRSB = $.fn.modal.Constructor.prototype.resetScrollbar;
        $.fn.modal.Constructor.prototype.resetScrollbar = function () {
            oldRSB.apply(this);
            $('.navbar-fixed-top, .navbar-fixed-bottom').css('padding-right', '');
        }
    });
});

Upvotes: 0

Skacc
Skacc

Reputation: 1778

You can move your header when the model opens, in your CSS file:

.modal-open header { padding-right: 17px; }

Upvotes: 0

Angel Ramirez
Angel Ramirez

Reputation: 77

none work but changing the bootstrap itself from

(this.$body.css("padding-right")||0,10)

to 

(this.$body.css("padding-right")||0,0)

Took me about an hour to find it and change

Upvotes: 0

murli2308
murli2308

Reputation: 3002

Simple Fix

.modal-open {
  position: fixed;
  overflow: scroll;
  width: 100%;
  padding-right: 0!important;
}

Upvotes: 7

user3176382
user3176382

Reputation:

When the modal opens, everything from the page are moving. Also, a class .modal-open is adding up in the body tag. So, I tried to add a padding-right: 15px; to .modal-open. The body is no longer moving except to header. So I've also added a padding-right: 15px to the .modal-open header and everything works fine now.

CSS should be added:

.modal-open {
  padding: right: 15px;
}
.modal-open header {
  padding: right: 15px;
}

Upvotes: 0

vanarajcs
vanarajcs

Reputation: 978

Try this

.modal {
    overflow-y: auto;
}

.modal-open {
    overflow: auto;
}

Upvotes: 5

Stanley M&#225;cha
Stanley M&#225;cha

Reputation: 36

It's just because your body loses scrollbar and your body width expands on behalf of the scrollbars width. Either add overflow:scroll; to the body css properties or use some custom scroll bar js plugin - there are scrollbars that dont share window width with body element.

Upvotes: 0

ben.kaminski
ben.kaminski

Reputation: 976

Updated Answer

This should do the trick:

.modal-open[style] {
   padding-right: 0px !important;
}

JSFIDDLE HERE

Hope this helps!!!

Incase you're wondering why, the "modal-open" class was applying a inline style of "padding-right: 15px" so just overwrite the CSS and it seems to be working fine.

Upvotes: 5

Reitz
Reitz

Reputation: 59

This happens becouse when the modal show up, body receives "overflow:hidden". This cause the scroll bars to hide, the distance refers to the scrollbar width.

To test it, use:

body{
    overflow: scroll !important;
}

The problem to "fix" this is, scrollbars vary a little from browser to browser, so or you make the scrollbars always visible, or you add some padding-right with jquery (around 18px);

Upvotes: 0

Related Questions