Body width increases when modal is opened #64

pomber · 2013-01-26T23:02:49Z

When the modal is open, it applies the "modal-open" class to the body tag. The "overflow:hidden" style makes the body width to increase.
If you have some horizontal centered content it moves a bit to the right, and back to the left when you close the modal.
I tried it in the demo page and the same happened.
Is there any way to avoid this?

Only tested in Chrome.

jschr · 2013-01-27T00:48:06Z

Have you wrapped your page in a page-container element? Your document should look something like this:

<body>
  <div class="page-container">
    ...
  </div>
</body>

See the README on how to prevent background scrolling for an example as well.

pomber · 2013-01-27T01:17:18Z

Thanks! that solved the horizontal centered content problem.
But there is still one problem with media queries, if the body width exceeds the media query breakpoint, when the modal is opened, the style will change.

jschr · 2013-01-27T01:19:04Z

Sorry I don't quite follow, the style of the modal changes? Can you post a screenshot?

pomber · 2013-01-27T01:45:10Z

No, I mean the style of the rest of the page.

When the modal is opened, the body is expanded 15px.
If you have width-dependent style like:

@media (max-width:500px) { 
  div { background: red}
}
@media (min-width:500px) { 
  div { background: green}
}

and you have a 495px width body before opening the modal, when the modal is opened the body width will expand to 510px changing the background color from red to green.

I did the example with background color, but in a responsive website it could change the layout entirely.

Sorry I didnt make a live example, it is difficult because it depends on the viewport width, but if the problem is still not clear tell me and I will try to do it.

jschr · 2013-01-27T01:54:30Z

Why does opening the modal cause the body to expand? Is it because of the scrollbar? I do attempt to make sure there is no page jerkiness when opening and closing a modal due to scrollbars appearing/disappearing.

pomber · 2013-01-27T02:06:39Z

The body is expanded when this class

.modal-open {
  overflow: hidden;
}

is applied to the body (and the page has a scrollbar).

I am reproducing it in the demo page, it happens at least in Chrome.

jschr · 2013-01-27T02:20:16Z

Odd, I'm not seeing any page jerkiness from my end (also on Chrome). Do I need to be at a specific viewport size?

This should be prevented by forcing a scrollbar on the modal's container and the background page. Specfically https://github.com/jschr/bootstrap-modal/blob/master/css/bootstrap-modal.css#L15.

So unless the page-overflow class is not being set on body for some reason.. I'm not sure why.

pomber · 2013-01-27T12:59:59Z

Take a look at this fiddle.
Resize the result panel so the width is between 490px and 499px.
Open the modal.

The body width will exceed the 500px breakpoint and the background color will change because of this:

@media (min-width:500px) {
  .page-container { background: red; }
}

jschr · 2013-01-27T15:36:45Z

Ah, this only seems to happen on windows, which explains why I wasn't seeing it on my mac.

To be honest I'm not quite sure how to fix this as overflow: hidden is required to prevent the background page from scrolling while the modal is open.

I've been experimenting with other techniques but so far they come with other problems. For example you can do something like this instead:

body.modal-open {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: scroll;
}

This should fix it for your case but you might run into other problems as dicussed in #44.

pomber · 2013-01-27T16:49:45Z

Apparently, it is a Chrome problem because the width used for the media queries should include the scrollbar, so when removing the scrollbar the width should remain the same.

Anyway, the plugin is great, thanks a lot.

jschr · 2013-01-27T20:42:32Z

Interesting, thanks for looking into it.

jtzikas · 2013-02-02T19:21:26Z

I had the same or a similar problem in both Chrome and Safari for windows. When opening a modal the content in a container was shifted to the right. After debugging the issue I found out that the margin-left and margin-right was changing in those browsers for no apparent reason. So I modified the code of the modal-manager in appendModal a bit and the issue was resolved. I'm posting it here:

var showModal = function(){
    modal.isShown = true;

    var transition = $.support.transition && modal.$element.hasClass('fade');

    /*Declare the variables to store the original margin values*/
    var originalContainerMarginLeft, originalContainerMarginRight, originalOffsetLeft;
    /*Get the direct .container children of the .page-container*/
    var $container = $('.page-container > .container');
    /*Check if there is a container in place*/
    var hasContainer =  $container.length > 0;
    if(hasContainer) {
        /*Get the original values before the toggle class*/
        originalContainerMarginLeft = $container.css('margin-left');
        originalContainerMarginRight = $container.css('margin-right');
        if(originalContainerMarginLeft == '0px' && originalContainerMarginRight == '0px') {
            /*The case of Safari*/
            originalOffsetLeft = $container.offset().left;
        }
    }
    that.$element
        .toggleClass('modal-open', that.hasOpenModal())
        .toggleClass('page-overflow', $(window).height() < that.$element.height());

    if(hasContainer) {
        /*Restore the original values rigth after the toggle class*/
        if(originalOffsetLeft) {
            /*The case of Safari*/
            /*$container.offset({left:originalOffsetLeft}) has a nasty side effect. After the first
              time the left is constantly decreased and the container is moved to the left.
              The only way I found to make it work is via the following*/
            $container.css('margin-left', originalOffsetLeft + 'px');
        } else {
            $container.css('margin-left', originalContainerMarginLeft);
            $container.css('margin-right', originalContainerMarginRight);
        }
    }
    /*...snip the code remains the same bellow this line ...*/
}

The Safari issue was trickier though. There is an exception case to handle it as you see in the code. This was the only solution I found during the time I spent for this issue.

Regards

bb-cyrus · 2013-04-17T18:54:40Z

I've been struggling with the same issue on chrome on my mac. Thanks jschr! Your fix worked for me!

chrisjimallen · 2013-08-15T15:24:25Z

I seem to be getting this error in Firefox & Chrome. Here is a small screencast demo - http://screencast.com/t/918YnCmCUo6

daveywc · 2013-10-01T01:01:26Z

I was able to fix a similar problem, which only occurred after converting to Bootstrap 3, by adding the following style:

/* This stops the underlying container from shifting way to the right when the modal is open*/
body.modal-open {
margin-left: auto;
margin-right: auto;
}

chrylis · 2014-05-21T21:31:54Z

I can confirm this issue in Firefox and Chrome for Linux.

popecj29 · 2014-07-31T15:18:51Z

.modal-open {
overflow: hidden
width: calc(100% - 17px) //for chrome/safari
width: -moz-calc(100% - 16px) //for firefox
width: -ms-calc(100% - XXpx) // where "XX" equals the width of the scrollbar in IE)
}

seems to work pretty well for me. Found this to be an incredibly frustrating morning.

neil-119 · 2014-09-14T15:47:27Z

I can confirm that this issue exists on the latest version of Chrome. This is one very annoying bug and none of the solutions listed work for me.

ghost · 2014-09-16T18:51:57Z

This worked for me:

body {
  padding-right: 0px !important
}

.modal-open {
  overflow-y: auto;
}

neil-119 · 2014-09-19T02:32:23Z

@jasonozias Thanks buddy, that works!

schlangguru · 2014-10-25T08:01:51Z

@jasonozias Yep. This works great!

Marcotss · 2014-12-13T03:23:10Z

@jasonozias niceee !! thank you alotttt

rogerionunes · 2015-01-28T14:05:22Z

@jasonozias thx! NICE! :D

NaikDeepak · 2015-05-07T20:43:24Z

@jasonozias Thanks, finally something that really works!

ianmartorell · 2015-06-04T22:42:16Z

@jasonozias thanks!

teleyinex · 2015-06-12T09:15:23Z

@jasonozias thanks! It works here too!

sahillamba · 2015-06-17T05:09:29Z

@jasonozias :Thanks.Works for me too.

marekjm · 2015-07-12T12:15:04Z

@jasonozias Thank you! Works for me!

adrianescat · 2015-08-12T21:44:30Z

@jasonozias thats the solution. ty

DurjoySaha · 2015-09-07T08:30:05Z

many many thnx Mr. jschr And Pomber

maxouni · 2015-09-30T09:53:51Z

js simple solution:

customize bootstrap modal.js

hide: function (e) {
//add
manager.$element.width(manager.$element.width());
//before string:
manager.appendModal(this);

hide: function (e) {
//add
jQuery('body').attr('style', '');

hard, but working!!!

RafaPolit · 2015-10-01T19:33:56Z

Thanks for the feedback! I am trying @jasonozias solution, and it works on iOS. But introduces dual-scrolls on desktop browsers when the page has its own scroll and the modal requires a vertical scroll as well.

Have you guys figured out a solution for that issue? Is it happening to anyone else? Thanks,

Best regards,
Rafa.

JViola · 2015-10-15T20:57:39Z

padding-right: 0 !important is THE solution! Thx @jasonozias

jmuheim · 2015-11-11T09:58:00Z

👍 @jasonozias

…modal#64 (comment)

DannyFeliz · 2015-12-05T12:37:45Z

Thank you @jasonozias 👍

theyuv · 2016-01-06T08:25:55Z

@RafaPolit This happens to me as well.
When desktop browser is not maximized, I have 2 scrollbars on the right of the page.
Does anybody have any fixes for this? Maybe a selector that targets the problematic (ie: mobile) devices.

RafaPolit · 2016-01-07T22:39:26Z

@theyuv,

This solution worked for me without the double scroll, at least for the time being:

body {
  min-height: 100vh;
}

Hope this helps.
Best regards,
Rafa.

theyuv · 2016-01-08T10:57:34Z

@RafaPolit Thanks.
There's also this:
https://bugs.webkit.org/show_bug.cgi?format=multiple&id=152803
Although I'm not quite sure what it's saying.

RafaPolit · 2016-01-11T05:11:15Z

It´s apparently saying they have fixed the bug on a future release and we can remove this 'fixes' whenever the update comes forward to the public.

This applies the fix to the issue given in jschr/bootstrap-modal#64 (comment)

koreguy · 2018-11-27T18:58:52Z

The issue still persist until now in the latest chrome!
Thanks @ghost for providing a working solution!

joangavelan · 2020-12-29T07:48:45Z

It took me a while to figure it out, but the problem is simply because the vertical scrollbar appears with a certain body height, before the modal (in my case a filterable product gallery) the body was not high enough for the vertical scrollbar to appear, but once it is and the scrollbar appears, it causes the content to be pushed to the left.

I solved this by leaving the vertical scrollbar always visible body {overflow-y: scroll;}

or with overflow: overlay (not supported by all browsers).

jschr closed this Jan 27, 2013

dwanderton mentioned this issue Nov 13, 2013

Body shifts when modal opens dwanderton/NodeNewsGrid#88

Closed

jmuheim pushed a commit to Access4all/swiss-handicap-2014 that referenced this issue Nov 11, 2015

Fixes zoom problem when opening a dialog on iOS, see jschr/bootstrap-…

cd5e734

…modal#64 (comment)

sdob added a commit to sdob/dsfe that referenced this issue Feb 23, 2016

Apply a CSS-only fix for iOS Safari bootstrap bug

eb17d47

This applies the fix to the issue given in jschr/bootstrap-modal#64 (comment)

jschr / bootstrap-modal

Body width increases when modal is opened #64

Body width increases when modal is opened #64

Comments

pomber commented Jan 26, 2013

jschr commented Jan 27, 2013

pomber commented Jan 27, 2013

jschr commented Jan 27, 2013

pomber commented Jan 27, 2013

jschr commented Jan 27, 2013

pomber commented Jan 27, 2013

jschr commented Jan 27, 2013

pomber commented Jan 27, 2013

jschr commented Jan 27, 2013

pomber commented Jan 27, 2013

jschr commented Jan 27, 2013

jtzikas commented Feb 2, 2013

bb-cyrus commented Apr 17, 2013

chrisjimallen commented Aug 15, 2013

daveywc commented Oct 1, 2013

chrylis commented May 21, 2014

popecj29 commented Jul 31, 2014

neil-119 commented Sep 14, 2014

ghost commented Sep 16, 2014

neil-119 commented Sep 19, 2014

schlangguru commented Oct 25, 2014

Marcotss commented Dec 13, 2014

rogerionunes commented Jan 28, 2015

NaikDeepak commented May 7, 2015

ianmartorell commented Jun 4, 2015

teleyinex commented Jun 12, 2015

sahillamba commented Jun 17, 2015

marekjm commented Jul 12, 2015

adrianescat commented Aug 12, 2015

DurjoySaha commented Sep 7, 2015

maxouni commented Sep 30, 2015

RafaPolit commented Oct 1, 2015

JViola commented Oct 15, 2015

jmuheim commented Nov 11, 2015

DannyFeliz commented Dec 5, 2015

theyuv commented Jan 6, 2016

RafaPolit commented Jan 7, 2016

theyuv commented Jan 8, 2016

RafaPolit commented Jan 11, 2016

koreguy commented Nov 27, 2018 • edited

joangavelan commented Dec 29, 2020

koreguy commented Nov 27, 2018 •

edited