Padding problem when there is a forced scrollbar

[Michael-Ziluck]

There is an issue with the way modals add margins to account for the scroll bar. This issue occurs in the most recent releases of both Bootstrap 3 and 4.

When a browser is forced to display the scrollbar when the vertical content does not require the scrollbar, a padding-right is added to the body when it is not necessary.

Two jsfiddle examples are below that show the problem.

Bootstrap 4:
https://jsfiddle.net/ziluckmichael/fh71sgo0/

Bootstrap 3:
https://jsfiddle.net/ziluckmichael/nvz0ybux/

As you can see it adds padding-right to the browser when it is not required. Both examples use the default code almost exactly as it is off of the demo page.

Browsers Always Affected:

• Microsoft Edge 40.15063.674.0
• Google Chrome 71.0.3578.98 (Official Build) (64-bit)
• Firefox 64.0.2

Browsers Sometimes Affected:

• Internet Explorer 11.1508.15063.0

For IE 11, the issue does not occur on my test/demo of the problem, but it does occur on the actual production website where I discovered the issue originally. It appears this is because IE overlays the scrollbar and has it slowly disappear, while every other browser has it permanently on the screen.

[pcodedviral]

hello @ZiluckMichael

plz remove below given css

:root {
overflow-y: scroll;
}

[Michael-Ziluck]

The reason for the ticket is I need to have that bit of CSS for other purposes within my application. My website requires the scrollbar to be visible even when the vertical content does not require it. Right now, Bootstrap does not account for this.

[Yarden84]

Hi @ZiluckMichael .
I tried adding:

html{
width: 100vw;
}

and it seems to work with your problem.
the solution is taken from one of the anwers from here - https://stackoverflow.com/questions/18548465/prevent-scroll-bar-from-adding-up-to-the-width-of-page-on-chrome

[Michael-Ziluck]

I managed to fix the issue, all I had to do was change the ":root" selector to "body" instead. Regardless, this is still a bug that could be fixed so I thought it was helpful to open an issue.

[Lausselloic]

Hello, I just face the same problem, and looks like there's a padding issue all the time event if the scrollbar isn't forced but display due to content overflow.
The padding error is visible on this codepen : https://codepen.io/anon/pen/EMxYXQ

I had try to use the fix with the 100vw on html element but it makes an horizontal scroll apear, and need to add an overflow-x:hidden on the body which is very bad for accessibility : https://codepen.io/anon/pen/NJKZwX

Can't find in git history why that padding was added? maybe for IE8 or older non-supported browser in v4?

[Lausselloic]

I've made some tests, and it looks like _adjustdialog() is useless.

1. Tests on IE11, FF ESR, Chrome latest show there's no need of padding-right on modal element when there's a scrollbar on body
2. paddingleft when modal overflow, but not the body is never fired

  _adjustDialog() {
    const isModalOverflowing =
      this._element.scrollHeight > document.documentElement.clientHeight
    if (!this._isBodyOverflowing && isModalOverflowing) {
      // we never pass here even if modal is higher than body, and for sure it's useless
      // this._element.style.paddingLeft = `${this._scrollbarWidth}px`
    }

    if (this._isBodyOverflowing && !isModalOverflowing) {
      // in case where it's the body that make an overflow there's no need to put a padding-right on the modal itself
      // this._element.style.paddingRight = `${this._scrollbarWidth}px`
    }
  }

@fat I think there's a good reason for all that code you write, but I can't find why in git history, any idea to refresh our memory?

Would you like a PR to try it in action and compare the comportement before and after?

[Axedyson]

I managed to fix the issue, all I had to do was change the ":root" selector to "body" instead. Regardless, this is still a bug that could be fixed so I thought it was helpful to open an issue.

@ZiluckMichael How did you change the .root selector to body?

[mdo]

Closing as stale for v4. We'll be moving onto focus entirely on v5 and v4 will only see critical updates.

[TakaRuangshawk]

Hi @ZiluckMichael . I tried adding:

html{ width: 100vw; }

and it seems to work with your problem. the solution is taken from one of the anwers from here - https://stackoverflow.com/questions/18548465/prevent-scroll-bar-from-adding-up-to-the-width-of-page-on-chrome

omg that's worked, when I use 'overflow : scroll' then overflow is not show, body element will create padding-right : 15px
mostly I search this problem in google or anywhere they think I got problem from overflow-x.
thank you so much.