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

Body width increases when modal is opened #64

Closed
pomber opened this Issue Jan 26, 2013 · 39 comments

Comments

Projects
None yet
@pomber

pomber commented 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

This comment has been minimized.

Owner

jschr commented 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

This comment has been minimized.

pomber commented 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

This comment has been minimized.

Owner

jschr commented Jan 27, 2013

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

@pomber

This comment has been minimized.

pomber commented 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

This comment has been minimized.

Owner

jschr commented 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

This comment has been minimized.

pomber commented 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

This comment has been minimized.

Owner

jschr commented 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

This comment has been minimized.

pomber commented 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

This comment has been minimized.

Owner

jschr commented 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

This comment has been minimized.

pomber commented 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

This comment has been minimized.

Owner

jschr commented Jan 27, 2013

Interesting, thanks for looking into it.

@jschr jschr closed this Jan 27, 2013

@jtzikas

This comment has been minimized.

jtzikas commented 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

This comment has been minimized.

bb-cyrus commented Apr 17, 2013

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

@chrisjimallen

This comment has been minimized.

chrisjimallen commented 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

This comment has been minimized.

daveywc commented 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

This comment has been minimized.

chrylis commented May 21, 2014

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

@popecj29

This comment has been minimized.

popecj29 commented 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

This comment has been minimized.

neil-119 commented 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

This comment has been minimized.

ghost commented Sep 16, 2014

This worked for me:

body {
  padding-right: 0px !important
}

.modal-open {
  overflow-y: auto;
}
@neil-119

This comment has been minimized.

neil-119 commented Sep 19, 2014

@jasonozias Thanks buddy, that works!

@schlangguru

This comment has been minimized.

schlangguru commented Oct 25, 2014

@jasonozias Yep. This works great!

@Marcotss

This comment has been minimized.

Marcotss commented Dec 13, 2014

@jasonozias niceee !! thank you alotttt

@rogerionunes

This comment has been minimized.

rogerionunes commented Jan 28, 2015

@jasonozias thx! NICE! :D

@NaikDeepak

This comment has been minimized.

NaikDeepak commented May 7, 2015

@jasonozias Thanks, finally something that really works!

@ianmartorell

This comment has been minimized.

ianmartorell commented Jun 4, 2015

@jasonozias thanks!

@teleyinex

This comment has been minimized.

teleyinex commented Jun 12, 2015

@jasonozias thanks! It works here too!

@sahillamba

This comment has been minimized.

sahillamba commented Jun 17, 2015

@jasonozias :Thanks.Works for me too.

@marekjm

This comment has been minimized.

marekjm commented Jul 12, 2015

@jasonozias Thank you! Works for me!

@adrianescat

This comment has been minimized.

adrianescat commented Aug 12, 2015

@jasonozias thats the solution. ty

@DurjoySaha

This comment has been minimized.

DurjoySaha commented Sep 7, 2015

many many thnx Mr. jschr And Pomber

@maxouni

This comment has been minimized.

maxouni commented 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

This comment has been minimized.

RafaPolit commented 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

This comment has been minimized.

JViola commented Oct 15, 2015

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

@jmuheim

This comment has been minimized.

jmuheim commented Nov 11, 2015

👍 @jasonozias

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

@DannyFeliz

This comment has been minimized.

DannyFeliz commented Dec 5, 2015

Thank you @jasonozias 👍

@theyuv

This comment has been minimized.

theyuv commented 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

This comment has been minimized.

RafaPolit commented 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

This comment has been minimized.

theyuv commented 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

This comment has been minimized.

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment