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

Comments

Projects
None yet
@mat0r
Copy link

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

This comment has been minimized.

Copy link
Contributor

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

@cvrebert

This comment has been minimized.

Copy link
Member

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?

@jamescostian

This comment has been minimized.

Copy link
Contributor

jamescostian commented Aug 19, 2013

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

@mdo

This comment has been minimized.

Copy link
Member

mdo commented Aug 19, 2013

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

@fat

This comment has been minimized.

Copy link
Member

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

@mdo mdo closed this in 3f87bf4 Aug 19, 2013

@chrisseaton

This comment has been minimized.

Copy link
Contributor

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.

@mdo mdo reopened this Aug 19, 2013

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Aug 20, 2013

Also happens on OS X Chrome.

@Merg1255

This comment has been minimized.

Copy link

Merg1255 commented Aug 20, 2013

This is #9886

@tnorthcutt

This comment has been minimized.

Copy link

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.

@mdo

This comment has been minimized.

Copy link
Member

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

@Merg1255

This comment has been minimized.

Copy link

Merg1255 commented Aug 24, 2013

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

@luishdez

This comment has been minimized.

Copy link
Contributor

luishdez commented Aug 29, 2013

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

@huwcbjones

This comment has been minimized.

Copy link

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.

@Merg1255

This comment has been minimized.

Copy link

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.

@Merg1255

This comment has been minimized.

Copy link

Merg1255 commented Aug 30, 2013

@ctaepper

This comment has been minimized.

Copy link

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

@jamesmfriedman

This comment has been minimized.

Copy link

jamesmfriedman commented Sep 1, 2013

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

@ghost

This comment has been minimized.

Copy link

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?

@chrisseaton

This comment has been minimized.

Copy link
Contributor

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

@Merg1255

This comment has been minimized.

Copy link

Merg1255 commented Mar 19, 2014

This is such an epic topic... :)

@cjwprostar

This comment has been minimized.

Copy link

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.

@sirNemanjapro

This comment has been minimized.

Copy link

sirNemanjapro commented Mar 24, 2014

+1

cvrebert referenced this issue Mar 29, 2014

Modal body shift fix for IE10/11
Closes #13103 by merging it.
@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Mar 29, 2014

Closing again per #13103.

Fixed by 0907244 in v3.2.0.

@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

(less) Half fix for twbs#9855: Don't fuck with margins for open modal…
… dialog on account of Lion non-scrollbars and inconsistencies elsewhere
@yshing

This comment has been minimized.

Copy link

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....

@sirNemanjapro

This comment has been minimized.

Copy link

sirNemanjapro commented May 2, 2014

@yshing great work 👍

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented May 2, 2014

@yshing On what OS and browser?

@yshing

This comment has been minimized.

Copy link

yshing commented May 2, 2014

@cvrebert ON OSX 10.9.2 CHROME

@mdo

This comment has been minimized.

Copy link
Member

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.

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented May 2, 2014

:facepalm: Gah. We really ought to 🚢 that soon.

@cod-1

This comment has been minimized.

Copy link

cod-1 commented May 3, 2014

@yshing Maintenance done successfully! ;)

@leniel

This comment has been minimized.

Copy link

leniel commented May 25, 2014

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

@phpMagpie

This comment has been minimized.

Copy link

phpMagpie commented May 30, 2014

Thanks @yshing

@guthyerrz

This comment has been minimized.

Copy link

guthyerrz commented May 31, 2014

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

@OlyTsav

This comment has been minimized.

Copy link

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

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 17, 2014

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

@twbs twbs locked and limited conversation to collaborators Jun 17, 2014

MrOrz added a commit to MrOrz/bootstrap that referenced this issue Jul 6, 2014

fix(modal): port scrollbar-width detection in v3.2.0
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

Bump up bootstrap css version to v3.2.0.
- 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

(less) Half fix for twbs#9855: Don't fuck with margins for open modal…
… 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.
You can’t perform that action at this time.