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.
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.
Yoel's solution worked. He suggested changing the style sheet to reflect "fixed" with 100% width. This fixed the issue on all browsers.
Related
The website I'm creating use a series of which have min-height set at 100vh; inside of which a complex flexbox is used.
When finishing my website I notice something that annoys me :
when using Chrome on MacOS, when you are in fullscreen and you put your mouse at top, the macOS menu and window option show up causing the vh to change (not the case on Safari).
Problem is that it is recalculating every flexbox and change image zoom (as you can see in the picture). with menu popped without menu
What would be a solution ? I still wish to make section based on vh as it renders good.enter image description here
I am working in ReactJS. I have a menu bar of sorts on mobile that has position: fixed and bottom: 0. It sits stuck to the bottom of the page in portrait and landscape in all browsers except Safari.
In portrait, it works just fine. When you switch to landscape it sits in the right spot, until you scroll the page down. When safari drops the search menu, it pushes the menu bar below the screen. To me (given the position of the menu bar hasn't changed) it seems that the search menu dropping is moving the bottom of the document below the screen. From all my searching, I also haven't seen any fixes to this, it seems like this is just the way Safari is. Anyone have any suggestions?
Here is the relevant component: https://github.com/Taouen/gobble/blob/master/src/components/MobileBox.js
It may be your use of vh that is causing the problem.
Safari on IOS uses a value of vh that is 1% of screen height (i.e. it is a fixed value whether or not the search bar is showing at the top). This is so there isn't an 'uncomfortable' jump as the user scrolls down and the search bar disappears.
see for example: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
which has a workaround where you use --vh, defined as one hundredth of window.innerHeight, instead of vh.
(This should probably be a comment to the original question as it's not a full, tested answer, but I don't have enough reputation to make a comment, sorry)
When viewing my website from an iPhone or iPad my site displays just fine when scrollbars on present. However, when you access a page when scroll bars are not needed the display gets messed up. I have no idea how to resolve this issue. Any ideas?
For an example my website is www.surfboardswap.com. The homepage appears fine on a mobile device. But if you access www.surfboardswap.com/alerts the display does not fit on the page since scroll bars are not needed.
Thanks for the help!
It looks to me like both those links you provided render with scroll bars depending on the width of my browser screen. I think you're ultimate issue here is responsive design.
You have a width set on your .container css selector. This is breaking the responsiveness of you're site, because it's being forced to that width even on smaller screens. Try removing that!
When I browse my website on computer, everything looks fine in all major browsers, however, when I check it on Android phone there's a massive gap below footer. This happens only in portrait mode and in all android browsers. When I view it in landscape mode, the gap disappears in all browsers.
I tried 'playing' with viewport meta tag, but it doesn't help.
My site's width: 1300px and height:100%. Also, footer has padding-bottom:0; margin-bottom:0;
What could cause this problem to happen only in portrait mode?
Update: It seems that the height of a page isn't large enough to fill entire screen of my mobile so there's this gap. When I browse the page it's completely zoomed out according to sites width. How to make it zoom in according to site's height instead and thereby eliminate the bottom gap?
Please help
P.S. Unfortunately, I cannot provide you link to the site as it's on a local server.
Ok, guys. I managed to fix it. Probably not the best fix in the world but better than nothing.
So what I did was forced minimum zoom by using viewport minimum-scale=0.6.
No bottom gap after this fix.
I'm currently redesigning a website and have run into an issue with horizontal scrolling when the page is viewed in a narrow browser window.
The header contains a logo, some text and a navigation bar and spans 100% of the page width, but the header content is centered with a fixed width of 940px. When shown properly, it looks like this:
However, if the browser window is resized to be narrower than the fixed width a horizontal scrollbar appears (as expected), but scrolling it 'cuts' the scrolled part out, producing the following result:
The work-in-progress site can be viewed live here, if the CSS/HTML can give you any hints as to what I'm doing wrong.
The easiest way to fix this problem is to add min-width:940px to the body tag and use an expression for ie6.
It works fine for me in Firefox 3.6.8, IE 8, and Chrome 5. What browser are you using? Looks like you are using Chrome.
Is the page being cached in your browser incorrectly? Try clearing your cache and then check the site, or try viewing it on another computer. The CSS for the header is straightforward and correct. Nothing there should be causing problems.