Greybox Overlay Changes Size of Window

Question

I am using greybox on my business site so that users can login and access their accounts. Example of my site

When the window is activated by selecting "login" or "sign up" at the top of the page, the size of the page or window either expands or changes (discovered by showing scroll bars on bottom and right of window.) How can I keep this from happening? I want the page to have the same size as it did before the window was activated.

Answer 1

Yoel's solution worked. He suggested changing the style sheet to reflect "fixed" with 100% width. This fixed the issue on all browsers.

Answer 2

While an old thread, for those still using greybox, the following update might be helpful:

Setting the GB_overlay position to "fixed" (in gb_styles.css) as Yoel suggested solved the problem for greyboxes that are not full screen (e.g., gb_page_center), but a full screen greybox (e.g., GB_showPage) still had the horizontal scrollbar and expanding browser window on Chrome, Edge, Chrome on iOS, and Safari on iOS.

Setting the GB_overlay width to 100% wasn't needed for the non-full screen greyboxes, and didn't fix the problem for a full screen greybox. Instead, setting the GB_overlay max-width to 100% fully resolved the expanding browser and horizontal scroll bar appearance in Chrome, Edge, Chrome on iOS, and Safari on iOS.

As Kevin also experienced, Firefox never had these problems with greybox, and these updated changes to the GB_overlay css had no effect on Firefox;s always correct rendering of the greybox.