Body width increases when modal is opened #64

pomber · Jan 26, 2013

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 · Jan 27, 2013

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 · Jan 27, 2013

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 · Jan 27, 2013

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

pomber · Jan 27, 2013

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 · Jan 27, 2013

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 · Jan 27, 2013

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 · Jan 27, 2013

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 · Jan 27, 2013

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 · Jan 27, 2013

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 · Jan 27, 2013

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 · Jan 27, 2013

Interesting, thanks for looking into it.

jtzikas · Feb 2, 2013

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 · Apr 17, 2013

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

chrisjimallen · Aug 15, 2013

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

daveywc · Oct 1, 2013

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 · May 21, 2014

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

popecj29 · Jul 31, 2014

.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 · Sep 14, 2014

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 · Sep 16, 2014

This worked for me:

body {
  padding-right: 0px !important
}

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

neil-119 · Sep 19, 2014

@jasonozias Thanks buddy, that works!

schlangguru · Oct 25, 2014

@jasonozias Yep. This works great!

Marcotss · Dec 13, 2014

@jasonozias niceee !! thank you alotttt

rogerionunes · Jan 28, 2015

@jasonozias thx! NICE! :D

NaikDeepak · May 7, 2015

@jasonozias Thanks, finally something that really works!

ianmartorell · Jun 4, 2015

@jasonozias thanks!

teleyinex · Jun 12, 2015

@jasonozias thanks! It works here too!

sahillamba · Jun 17, 2015

@jasonozias :Thanks.Works for me too.

marekjm · Jul 12, 2015

@jasonozias Thank you! Works for me!

adrianescat · Aug 12, 2015

@jasonozias thats the solution. ty

DurjoySaha · Sep 7, 2015

many many thnx Mr. jschr And Pomber

maxouni · Sep 30, 2015

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 · Oct 1, 2015

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 · Oct 15, 2015

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

jmuheim · Nov 11, 2015

👍 @jasonozias

DannyFeliz · Dec 5, 2015

Thank you @jasonozias 👍

theyuv · Jan 6, 2016

@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 · Jan 7, 2016

@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 · Jan 8, 2016

@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 · Jan 11, 2016

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.

jschr closed this Jan 27, 2013

dwanderton referenced this issue Nov 13, 2013
Closed
Body shifts when modal opens #88

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-…
…modal#64 (comment)

cd5e734

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

Apply a CSS-only fix for iOS Safari bootstrap bug
This applies the fix to the issue given in jschr/bootstrap-modal#64 (comment)

eb17d47

jschr/bootstrap-modal

Join GitHub today

Body width increases when modal is opened #64

Comments

pomber commented Jan 26, 2013

This comment has been minimized.

jschr commented Jan 27, 2013

This comment has been minimized.

pomber commented Jan 27, 2013

This comment has been minimized.

jschr commented Jan 27, 2013

This comment has been minimized.

pomber commented Jan 27, 2013

This comment has been minimized.

jschr commented Jan 27, 2013

This comment has been minimized.

pomber commented Jan 27, 2013

This comment has been minimized.

jschr commented Jan 27, 2013

This comment has been minimized.

pomber commented Jan 27, 2013

This comment has been minimized.

jschr commented Jan 27, 2013

This comment has been minimized.

pomber commented Jan 27, 2013

This comment has been minimized.

jschr commented Jan 27, 2013

jschr closed this Jan 27, 2013

This comment has been minimized.

jtzikas commented Feb 2, 2013

This comment has been minimized.

bb-cyrus commented Apr 17, 2013

This comment has been minimized.

chrisjimallen commented Aug 15, 2013

This comment has been minimized.

daveywc commented Oct 1, 2013

dwanderton referenced this issue Nov 13, 2013

Body shifts when modal opens #88

This comment has been minimized.

chrylis commented May 21, 2014

This comment has been minimized.

popecj29 commented Jul 31, 2014

This comment has been minimized.

neil-119 commented Sep 14, 2014

This comment has been minimized.

ghost commented Sep 16, 2014

This comment has been minimized.

neil-119 commented Sep 19, 2014

This comment has been minimized.

schlangguru commented Oct 25, 2014

This comment has been minimized.

Marcotss commented Dec 13, 2014

This comment has been minimized.

rogerionunes commented Jan 28, 2015

This comment has been minimized.

NaikDeepak commented May 7, 2015

This comment has been minimized.

ianmartorell commented Jun 4, 2015

This comment has been minimized.

teleyinex commented Jun 12, 2015

This comment has been minimized.

sahillamba commented Jun 17, 2015

This comment has been minimized.

marekjm commented Jul 12, 2015

This comment has been minimized.

adrianescat commented Aug 12, 2015

This comment has been minimized.

DurjoySaha commented Sep 7, 2015

This comment has been minimized.

maxouni commented Sep 30, 2015

This comment has been minimized.

RafaPolit commented Oct 1, 2015

This comment has been minimized.

JViola commented Oct 15, 2015

This comment has been minimized.

jmuheim commented Nov 11, 2015

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

This comment has been minimized.

DannyFeliz commented Dec 5, 2015

This comment has been minimized.