Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open modal is shifting body content to the left #9855

Closed
mat0r opened this issue Aug 19, 2013 · 120 comments
Closed

Open modal is shifting body content to the left #9855

mat0r opened this issue Aug 19, 2013 · 120 comments

Comments

@mat0r
Copy link

@mat0r mat0r commented Aug 19, 2013

When launching the modal component (http://getbootstrap.com/javascript/#modals) the entire content will slightly move to the left on mac OS (haven't tried it on windows yet). With the active modal the scrollbar seem to disappear, while the content width still changes.

You can observer the problem on the bootstrap page

@jamescostian
Copy link
Contributor

@jamescostian jamescostian commented Aug 19, 2013

I can confirm that I see this also on Chrome for Linux, both on getbootstrap.com and on the 3.0.0-wip branch

Loading

@cvrebert
Copy link
Collaborator

@cvrebert cvrebert commented Aug 19, 2013

@jamescostian If you mean on the CDN, that's outdated. Could you clarify whether you mean git or the CDN?

Loading

@jamescostian
Copy link
Contributor

@jamescostian jamescostian commented Aug 19, 2013

@cvrebert Via git. I even rebuilt the JS, and it's still doing this.

Loading

@mdo
Copy link
Member

@mdo mdo commented Aug 19, 2013

Yup, saw this as well when I enabled scrollbars all the time in OS X. /cc @fat

Loading

@fat
Copy link
Member

@fat fat commented Aug 19, 2013

kicking this back to @mdo – how twitter gets around this is they add a 15px margin to the right. and some other tricky css hacks…

@mdo you can just use the modal-open class to style the body as twitter has

Loading

@mdo mdo closed this in 3f87bf4 Aug 19, 2013
@chrisseaton
Copy link
Contributor

@chrisseaton chrisseaton commented Aug 19, 2013

This fix causes the page to jump 15px to the left when a modal is opened on desktop and iOS Safari. In those environments there is normally no scrollbar to cover - and who says a scrollbar is always going to be 15px?!

Before (blur to cover private content):

(image removed)

After:

(image removed)

You can see the extra 15px on the right - look at the navbar. What isn't so obvious is that the body text has also moved to the left. Same problem on desktop Safari.

Loading

@mdo mdo reopened this Aug 19, 2013
@cvrebert
Copy link
Collaborator

@cvrebert cvrebert commented Aug 20, 2013

Also happens on OS X Chrome.

Loading

@Merg1255
Copy link

@Merg1255 Merg1255 commented Aug 20, 2013

This is #9886

Loading

@tnorthcutt
Copy link

@tnorthcutt tnorthcutt commented Aug 20, 2013

Confirmed on OS X 10.8 Chrome, when scroll bars are always on:
screen shot 2013-08-20 at 11 44 04 am

Also confirmed on Windows 7 Chrome & IE10.

Loading

@mdo
Copy link
Member

@mdo mdo commented Aug 24, 2013

Okay, so what Twitter does now is they run a script to determine the width of the scrollbar and then apply conditional CSS to adjust the modal and page contents accordingly. They know when say OS 10.8 has scrollbars visible when scrolling vs always visible, for example. It's truly the only way of making it happen.

So, no matter what, we need some scripting to help us apply the styles.

/cc @fat

Loading

@Merg1255
Copy link

@Merg1255 Merg1255 commented Aug 24, 2013

@mdo the modal already needs some scripting to be functional.

Loading

@luishdez
Copy link
Contributor

@luishdez luishdez commented Aug 29, 2013

Oh crap! duplicated multiple times!, my bad. Apologies

Loading

@huwcbjones
Copy link

@huwcbjones huwcbjones commented Aug 30, 2013

EDIT:
Modal was created from the example in the docs and I copied the repo and used the css and js files from the dist directory.

After lots of tweaking and testing, the shift still occurs (on Win7 Pro Chrome (29) and Firefox (22) and iPad Safari (6.1.3)), I came to this conclusion:

If the body has already scrolling, there is no shifting, but, if the modal overflow-y is 'scroll' and the body hasn't got a scrollbar, then it shifts.

Loading

@Merg1255
Copy link

@Merg1255 Merg1255 commented Aug 30, 2013

There are some pixels added even if the body already has scrolling, and that's on 15" screens.
For some reason those pixels are added on the body, even if the modal can fit inside the current screen size.

Loading

@Merg1255
Copy link

@Merg1255 Merg1255 commented Aug 30, 2013

Loading

@ctaepper
Copy link

@ctaepper ctaepper commented Aug 30, 2013

+1 form me too!

i'm on osx:

using firefox, the everything seems ok, the scrollbar takes an actual 15px of the viewport. when the modal is opened, the scroll-y gets hidden and the 15px shift correctly keeps the website in place (if the shift wouldnt be there, the website would jump 15px to the right).

using chrome, its different. the scrollbar in chrome does not take an actual 15px of the viewport... its like an overlay here. opening the modal still triggers the 15px shift, which is in that case not correct

maybr this clarifies the issue

Loading

@jamesmfriedman
Copy link

@jamesmfriedman jamesmfriedman commented Sep 1, 2013

Just confirming that this is still an issue. Tested on OSX safari, chrome, firefox.

Loading

@ghost
Copy link

@ghost ghost commented Sep 1, 2013

This does not happen with v2.x.x So can't we use the same method to display the modal as in 2.x.x?

Loading

@chrisseaton
Copy link
Contributor

@chrisseaton chrisseaton commented Sep 1, 2013

As far as I know the reason it's different to v2 is so that scrolling works better - you can now scroll the page as normal, with the modal setting the limits, rather than having to scroll within the modal if it overflows, which on scrollbar-less systems is particularly bad as you would never know there was overflow-scroll hidden content as you can see the whole model so why would you think some part of it needed to be scrolled?

I know that the final RC worked perfectly for me, and that this change came between that final RC and the release.

My proposed solution is to make the fade cover the whole page, and let you scroll the page as normal, with the modal given an absolute position rather than its own scroll area within the fade. #9339

Loading

@cjwprostar
Copy link

@cjwprostar cjwprostar commented Mar 19, 2014

I'm still getting this issue on OS X 10.9.1/Safari 7.0.1 and Firefox 27.0.1 using master.
I think I tracked it down to when both the html and body are set to height: 100% which is how I'm making my sticky footer work.

Loading

@sirNemanjapro
Copy link

@sirNemanjapro sirNemanjapro commented Mar 24, 2014

+1

Loading

cvrebert referenced this issue Mar 29, 2014
@cvrebert
Copy link
Collaborator

@cvrebert cvrebert commented Mar 29, 2014

Closing again per #13103.

Fixed by 0907244 in v3.2.0.

Loading

@cvrebert cvrebert closed this Mar 29, 2014
stempler pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014
stempler pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014
… dialog on account of Lion non-scrollbars and inconsistencies elsewhere
@yshing
Copy link

@yshing yshing commented May 2, 2014

On Bootstrap 3.1.1, still got the issue.
[Note from the Bootstrap Core Team: That's because the bugfix targets Bootstrap v3.2.0.]

And fixed with following code:
---------- Code ----------
.modal{
overflow-y: auto;
}
.modal-open{
overflow:auto;
overflow-x:hidden;
}
---------- /Code ----------
---------- Bootstrap CSS cause this issue ----------
/* Bootstrap.css line:5087 /
.modal {
overflow-y: scroll; /
I overwrite it with auto /
}
/
Bootstrap.css line:5084 /
.modal-open {
overflow: hidden; /
I overwrite it with my original overflow settings */
}
----------- Bootstrap CSS cause this issue ----------
Caution: some of my * seems to be eaten by github. be careful....

Loading

@sirNemanjapro
Copy link

@sirNemanjapro sirNemanjapro commented May 2, 2014

@yshing great work 👍

Loading

@cvrebert
Copy link
Collaborator

@cvrebert cvrebert commented May 2, 2014

@yshing On what OS and browser?

Loading

@yshing
Copy link

@yshing yshing commented May 2, 2014

@cvrebert ON OSX 10.9.2 CHROME

Loading

@mdo
Copy link
Member

@mdo mdo commented May 2, 2014

I'm not surprised v3.1.1 has an issue btw—this fix won't land until v3.2 ships.

Loading

@cvrebert
Copy link
Collaborator

@cvrebert cvrebert commented May 2, 2014

🤦 Gah. We really ought to 🚢 that soon.

Loading

@cod-1
Copy link

@cod-1 cod-1 commented May 3, 2014

@yshing Maintenance done successfully! ;)

Loading

@leniel
Copy link

@leniel leniel commented May 25, 2014

@yshing great work 👍 You'll also help people here while 3.2 is being baked.

Loading

@phpMagpie
Copy link

@phpMagpie phpMagpie commented May 30, 2014

Thanks @yshing

Loading

@guthyerrz
Copy link

@guthyerrz guthyerrz commented May 31, 2014

I fixed it by adding a width:100% on the body css.

Loading

@OlyTsav
Copy link

@OlyTsav OlyTsav commented Jun 17, 2014

We fixed this by commenting out some of the previous css fixes. In boostrap.css comment the following shown in my screenshot.
comments

Loading

@cvrebert
Copy link
Collaborator

@cvrebert cvrebert commented Jun 17, 2014

Locking since this is fixed in v3.2.0 by 0907244 / #13103.

Loading

@twbs twbs locked and limited conversation to collaborators Jun 17, 2014
danielcojao added a commit to IntegratedBreedingPlatform/Fieldbook that referenced this issue Jun 23, 2014
based on: twbs/bootstrap#9855 (comment)

Reviewer: Tiff Go (post commit)

Issue: Improvement
MrOrz added a commit to MrOrz/bootstrap that referenced this issue Jul 6, 2014
Port the scrollbar-width detection introduced in bootstrap 3.2.0 to angular-ui-bootstrap.
The original issue in bootstrap is at twbs/bootstrap#9855.
supistar added a commit to supistar/EngineReader that referenced this issue Oct 26, 2014
- Contents body 15px shifting bug when launch modal component is fixed in v3.2.0
  Refer: twbs/bootstrap#9855
stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014
stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014
… dialog on account of Lion non-scrollbars and inconsistencies elsewhere
stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet