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

Body width increases when modal is opened #64

Closed
pomber opened this issue Jan 26, 2013 · 41 comments
Closed

Body width increases when modal is opened #64

pomber opened this issue Jan 26, 2013 · 41 comments

Comments

@pomber
Copy link

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
Copy link
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
Copy link
Author

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
Copy link
Owner

jschr commented Jan 27, 2013

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

@pomber
Copy link
Author

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
Copy link
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
Copy link
Author

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
Copy link
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
Copy link
Author

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
Copy link
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
Copy link
Author

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
Copy link
Owner

jschr commented Jan 27, 2013

Interesting, thanks for looking into it.

@jschr jschr closed this as completed Jan 27, 2013
@jtzikas
Copy link

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
Copy link

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

@chrisjimallen
Copy link

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

@daveywc
Copy link

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
Copy link

chrylis commented May 21, 2014

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

@popecj29
Copy link

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

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
Copy link

ghost commented Sep 16, 2014

This worked for me:

body {
  padding-right: 0px !important
}

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

@neil-119
Copy link

@jasonozias Thanks buddy, that works!

@schlangguru
Copy link

@jasonozias Yep. This works great!

@Marcotss
Copy link

@jasonozias niceee !! thank you alotttt

@rogerionunes
Copy link

@jasonozias thx! NICE! :D

@NaikDeepak
Copy link

@jasonozias Thanks, finally something that really works!

@ianmartorell
Copy link

@jasonozias thanks!

@teleyinex
Copy link

@jasonozias thanks! It works here too!

@sahillamba
Copy link

@jasonozias :Thanks.Works for me too.

@marekjm
Copy link

marekjm commented Jul 12, 2015

@jasonozias Thank you! Works for me!

@adrianescat
Copy link

@jasonozias thats the solution. ty

@DurjoySaha
Copy link

many many thnx Mr. jschr And Pomber

@maxouni
Copy link

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
Copy link

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
Copy link

JViola commented Oct 15, 2015

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

@jmuheim
Copy link

jmuheim commented Nov 11, 2015

👍 @jasonozias

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

Thank you @jasonozias 👍

@theyuv
Copy link

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
Copy link

@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
Copy link

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
Copy link

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
@koreguy
Copy link

koreguy commented Nov 27, 2018

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

@joangavelan
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests