Bootstrap: Modal open causes fixed content to shift

Created on 2 Oct 2016 · 3Comments · Source: twbs/bootstrap

I believe there is an issue with opening modals that causes fixed content to be shifted.

Here's an example http://codepen.io/eddywashere/pen/ZpXrxQ

I'm on OSX, 10.11.5, Chrome 53 and have System Preferences > General > Show scroll bars: always.

I believe this is sort of tracked in the Modal section of v4 issue https://github.com/twbs/bootstrap/pull/17021, but does not contain an active issue to track it.

Finally fix that shifting content bug by updating the modal.js to not adjust body padding, but rather the padding on a specific set of classes.

I found an issue that was closed because it was part of v3, https://github.com/twbs/bootstrap/issues/14040#issuecomment-244817197.

css js v4

Source

eddywashere

👍6

Most helpful comment

So this issue seems to be caused by this javascript (https://github.com/twbs/bootstrap/blob/v4-dev/js/src/modal.js#L428) that reads the width of the user's scrollbar and adjusts the <body>accordingly, BUT doesn't take into account fixed navbars because they have position: fixed;

This is an definitely an interesting issue that we struggled with as well.

judetucker on 28 Oct 2016

👍5

All 3 comments

I don't see the same problem on the docs site, and the only difference I've noticed is that something is adding a style="padding-right: 33px" to the <body> element. Granted, the docs do not use a fixed navbar, so maybe that has something to do with it?