Bootstrap: Navbar fixed top and modal popup bug

[Softmaker-Ltd]

When opening a modal popup on a page with navbar fixed top, the page below the navbar get wrong horizontal adjustment (padding) compared to the navbar above. This only occors if the page has a vertical scrollbar.

Enviroment:
Bootstrap v4.0.0-alpha.6.
IE11 and Google Chrome Versjon 58.0.3029.110 (64-bit).

Please see attached screenshot.

[wolfy1339]

What version of Windows?

[Johann-S]

Fixed here : #18441 and will be available in our next release

[Softmaker-Ltd]

Thank you so much Johann-S!

[Softmaker-Ltd]

I have just installed Bootstrap v4.0.0-beta, but this bug still occurs. Is this still a known issue?

[Johann-S]

yep we fixed a couple of issues about that see : https://github.com/twbs/bootstrap/issues/23278

[Johann-S]

I encourage you to try our last dist files :+1:

[Softmaker-Ltd]

I use the css files and js files from bootstrap-4.0.0-beta\dist, but still the same problem. When opening a modal popup on a page with navbar fixed top, the page below the navbar get wrong horizontal adjustment (padding) compared to the navbar above. This only occurs if the page has a vertical scrollbar.

[Johann-S]

Is it exactly this file ? Downloaded from this URL ? https://raw.githubusercontent.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.min.js

[Softmaker-Ltd]

Yes, it is exactly that file. Downloaded bootstrap.min.js from the url you provided again now to be 100% sure, but still the same problem. When the modal is displayed the navbar get wrong horizontal adjustment (padding) compared to the page below. This only occurs when the page has a scrollbar.

[Johann-S]

Please provide a reduce test case with a CodePen and I'll reopen this issue

[Softmaker-Ltd]

Here is a CodePen test case that shows the bug:
https://codepen.io/softmaker/pen/aLQKve

[Johann-S]

Ok I forked your Codepen with our latest change and this bug is still present : https://codepen.io/Johann-S/pen/BwGVvP

[waclaw66]

Same in 3.3.7

[maxoo7]

When opening a modal popup on a page with navbar fixed top, the page below the navbar get wrong horizontal adjustment (padding) compared to the navbar above. This only occors if the page has a vertical scrollbar.

Enviroment:
Bootstrap v4.0.0-alpha.6.
IE11 and Google Chrome Versjon 58.0.3029.110 (64-bit).

Please see attached screenshot.

This worked for me: https://stackoverflow.com/a/26883617/6063523

Regards!

[iamandrewluca]

@waclaw66 see https://github.com/twbs/bootstrap/pull/27331#issuecomment-425366402