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
Comments
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. |
Thanks! that solved the horizontal centered content problem. |
Sorry I don't quite follow, the style of the modal changes? Can you post a screenshot? |
No, I mean the style of the rest of the page. When the modal is opened, the body is expanded 15px. @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. |
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. |
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. |
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. |
Take a look at this fiddle. 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; }
} |
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 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. |
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. |
Interesting, thanks for looking into it. |
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 |
I've been struggling with the same issue on chrome on my mac. Thanks jschr! Your fix worked for me! |
I seem to be getting this error in Firefox & Chrome. Here is a small screencast demo - http://screencast.com/t/918YnCmCUo6 |
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*/ |
I can confirm this issue in Firefox and Chrome for Linux. |
.modal-open { seems to work pretty well for me. Found this to be an incredibly frustrating morning. |
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. |
This worked for me: body {
padding-right: 0px !important
}
.modal-open {
overflow-y: auto;
} |
@jasonozias Thanks buddy, that works! |
@jasonozias Yep. This works great! |
@jasonozias niceee !! thank you alotttt |
@jasonozias thx! NICE! :D |
@jasonozias Thanks, finally something that really works! |
@jasonozias thanks! |
@jasonozias thanks! It works here too! |
@jasonozias :Thanks.Works for me too. |
@jasonozias Thank you! Works for me! |
@jasonozias thats the solution. ty |
many many thnx Mr. jschr And Pomber |
js simple solution: customize bootstrap modal.js hide: function (e) { hide: function (e) { hard, but working!!! |
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, |
padding-right: 0 !important is THE solution! Thx @jasonozias |
Thank you @jasonozias |
@RafaPolit This happens to me as well. |
This solution worked for me without the double scroll, at least for the time being: body {
min-height: 100vh;
} Hope this helps. |
@RafaPolit Thanks. |
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)
The issue still persist until now in the latest chrome! |
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 or with |
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.
The text was updated successfully, but these errors were encountered: