Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Michael Lorenzana
12,029 PointsModal Window pushes the sites content
Whenever I click the register call-to-action button on the site it pushes the whole site to the left and has a white space on the right. Any help is much appreciated.
Michael Lorenzana
12,029 Pointshttps://w.trhou.se/0wzspdfvpn Here is a snapshot of what I have in my workspace
Andrés Angelini
Courses Plus Student 22,744 PointsHi Michael. If you check your page with the browser's inspector, you will notice that bootstrap applies a right padding of 29px to the body every time the modal is displayed, and that's why all the content inside the body is pushed to the left. This is because bootstrap tries to compensate for the browser's vertical scrollbar width that appears when there is more content that the browser window can display.
A very quick fix for this is to apply a bootstrap class of p-x-0 (0 left and right padding) to the body.
Here's a snapshot from a fork of your workspace with the fix already in place: https://w.trhou.se/hfp4e76ltr
Hope it helps!
Michael Lorenzana
12,029 PointsThat fixed it! Thank you for your answer. I always forget to inspect the elements in the browser. It is very useful. If you post your comment in the answer section I will give it a "best answer" check.
4 Answers
Pablo Rocha
10,142 PointsAdding padding to the body will not fix the issue in all browsers and a nav bar setups. The issue is the padding on the modal. Use this css to correct the issue.
body.modal-open {
width: 100% !important;
padding-right: 0 !important;
overflow-y: scroll !important;
}
NOTE: Avoid using !important when possible. Only use when actually required, like in this instance.
Andrés Angelini
Courses Plus Student 22,744 PointsYour very welcome!
I'm sorry, I meant to post it as an answer but I inadvertently add the solution as a comment. Here it goes.
Problem:
Content inside body is pushed to the left when modal is displayed.
Cause:
Bootstrap applies a right padding of 29px every time modal is displayed in order to compensate for the browser's vertical scrollbar width that appears when there is more content that the browser window can display.
Solution:
Applying a bootstrap class of p-x-0 (0 left and right padding) to the body.
Sample:
A snapshot from a forked version of Michael workspace with the fix applied: https://w.trhou.se/hfp4e76ltr
Nicklas Augustine
8,383 PointsVery helpful! Guli Hernandez should consider including this point in the video. It is a nice take-away knowing that modals causes this - and that it can be easily fixed!
Shazad Kazi
10,758 PointsHi Andres,
I am having the same problem, I've seen your forked version and I am currently using Google Chrome. It still appears as though the text moves once the vertical scroll bar disappears. I have not yet seen this illusive white space that Michael talks about.
Regards,
Andrés Angelini
Courses Plus Student 22,744 PointsHi Shazad.
I'm not sure if I'm understanding what's happening to you. I don't have Chrome installed but I did tried with Chromium. From what I can tell, it behaves exactly as with Firefox: whenever I click both "Register Now" buttons which invoke the modal window, the whole body (not only the text) now moves 29px to the right and move back 29px to the left when I close it. I think this is desired because one of the things that the modal window does is setting the overflow to hidden, effectively hiding the vertical scrollbar. This, in turn makes the body expand to the full window width. The idea behind this is that when the register form gains focus, you don't want the user to scroll vertically; what's important is for them to fill the form or just close it.
If you don't like this behaviour, you could try to compensate for those 29px manually by messing with bootstrap inner workings or using JavaScript (which is something I would avoid since it would add unneeded complexity).
Let me know if I got it right or if there is something else I can help you with.
Cheers!
Shazad Kazi
10,758 PointsHi Andres,
That makes sense, I was under the assumption that the class p-x-0 would remove the shifting of the content. You've clarified that it doesn't and would require changing the css.
Regards
Gianluca Maio
9,128 PointsI guess Guil Hernandez didn't consider addressing the padding problem because of scrollbars because he was using Chrome on a Mac that uses small, mac-style scrollbars by default. Windows uses standard scroll bars that take up space on our beautiful websites :)
Andrés Angelini
Courses Plus Student 22,744 PointsI'm really glad this resulted more helpful to people than I thought. I guess the teachers could add these kind of fixes in their teachers notes but on the other hand, solving problems like these on your own is what really helps you become more proficient over time. When you just follow the videos all seems pretty simple and just work, but what really happens is, according to my own personal experience, the moment you start working in your project you pretty much bump against a gazillion of these issues that forces you to read through the official documentation to truly learn and understand the inner workings of whatever technology you are using to find a solution. Although you might find solutions on the web for common problems that have already been solved, sometimes, these do not apply to your specific case, not to mention, the proposed "solutions" may also introduce clutter or bad practices that might become difficult to get rid of in the future.
In conclusion, I'm thankful to this problem because it forced me to review what I thought I understood. :)
Michael Lorenzana
12,029 PointsBeautiful websites indeed :)
Nicklas Augustine
8,383 PointsHi Gianluca,
Actually, I had the problem on a Mac using Chrome :O
Br.
Michael Lorenzana
12,029 PointsI guess I'm a bit of a perfectionist for noticing that small little detail. I'm glad to know that my question was able to help others come together and find a solution. The community here at teamtreehouse is really outstanding in continuing to grow as a front-end dev. Thanks again Andres Angelini for your input on solving the problem.
Andrés Angelini
Courses Plus Student 22,744 PointsThis is an amazing site indeed. And thank you, Michael, for posting your question!
J Scot Angus
Courses Plus Student 5,891 PointsI had the same issue (also on a Mac w/Chrome), and was wondering too. Glad someone figured it out before I spent too much time trying to solve. Thanks!
Andrés Angelini
Courses Plus Student 22,744 PointsYou're welcome! And thank you for confirming this is also an issue in other platforms and browsers too. Hopefully, this will help other students who experience the same problem and are struggling to understand what went wrong thinking that they made a mistake somewhere in their code.
Steven Parker
231,275 PointsSteven Parker
231,275 PointsIt would help if you share your code (be sure to blockquote it properly). Even better, make a snapshot of your workspace and post the link to it here.