I've written a web application and found that when I resize the page, the browser doesn't display it's own scrollbar as the window shrinks. This prevents the user from accessing content. I've set my body width to 500px and set the navbar to white-space:nowrap. How can I get the browser to recognize that there is content to the right of the screen?
Just to clarify I want the browser's scrollbar and not a scroll bar on any control.
You can use one of the following depending on whether you want horizontal, vertical, or both scrollbars to be added:
body {overflow-x:scroll;}
body {overflow-y:scroll;}
body {overflow:scroll;}
However, I think if you show the content in a section and then do
#id-of_your_div {overflow:scroll;}
So that you add scroll to the div rather than force the browser to show scrollbars, then your page will provide a much better user experience since such scrollbars are easier for users to access.
You can set the height or width of the body/element to 100.1% depending on which direction and element you want to have scrollable.
Instead of playing with the width, use the code that was intended for this purpose. The following CSS will force a scroll-bar to be present whether it's needed or not.
for both scroll-bars...
body {
overflow: scroll;
}
or just for a horizontal scroll-bar...
body {
overflow-x: scroll;
}
Related
Nice new nav bar on stackoverflow. Looks like the bootstrap I am using. It has the same problem that my site does, the nav bar jumps slightly when clicked.
Any ideas how to fix it? I haven't looked too close, but I'm thinking there should be some sort of javascript fix to hold the screen until it repaints.
The reason why the navbar jumps is because at load time the browser calculates, based on the information it has about the content, that it won't need a scrollbar. Therefore it starts rendering using full viewport width. For a quick flash, until enough of the page has loaded to make the browser paint the scrollbar, the navbar is full-width.
That means, in desktop browsers, it is 17px wider than on pages with scrollbar.
Note: Before trying to fix this, please note it's only an issue on wide, pointer based devices. It doesn't exist on mobile/touch devices. Any method from below should be limited, using media queries or device detection, to desktop, pointer based devices.
A few methods on dealing with this:
give certain elements min-height property so that the browser will estimate the initial height of the page correctly (or at least more accurate).
give <body> a min-height of calc(100vh + 1px) on pages you are certain will have a scrollbar.
use overflow:scroll on <body> on pages that you know know will have scrollbar (always wrap this in a media query)
hide (as in: opacity:0) all above the fold content and fade it in when a particular element has loaded (typically used on window load event, but you could just use a particular HTML element for this, if the page is very long and you don't care about the bottom parts to be loaded when you paint the top) - this technique is widely used by AngularJs websites/apps, principle from ng-cloak directive, but with opacity. Effective at removing FOUC and this desktop scrollbar jump issue.
use a scrollbar plugin, removing the default scrollbar. Custom scrollbars are usually positioned absolute, over the content and don't influence content rendering.
(this is more of a hack, but I use it):
#media (min-width: $md-min) { /* 768px ? */
#navbar { /* assuming this is navbar */
position:absolute;
left: 0; top: 0; /* depends on layout */
min-width: 100vw;
}
body {
margin-top: 60px; /* navbar height #desktop */
overflow-x: hidden;
}
}
Note: This issue is also known as the modal overlay navigation bug, because when modals give body position:fixed in order to place the overlay, the navigation jumps to full width (as the body no longer has a scrollbar). It's a long discussion, with various fixes. example.
From my point of view, this is a fault of desktop browser developers.
Sidebar should never, ever, interfere with window width calculation. You either paint it over the content (only when the user scrolls?) or you paint it aside from the page in a manner that still looks good when you don't have a scrollbar.
It's not that hard.
Im working on a Website and everything is ok, except my webside is "shaking". (I'm using chrome)
The margin of my main Container is changing on some sides and i have no idea why. They have the same html code, it must have something to do with the content in the main div-container
My Website: www.anitalernt.de
http://www.anitalernt.de/about-us.html is a bit more to the left and http://www.anitalernt.de/index.html after getting a task (just click some buttons) also.
Has someone a idea?
Always display the scrollbar
html {
overflow-y: scroll;
}
See:
Always show browser scrollbar to prevent page jumping
How to always show the vertical scrollbar in a browser?
You could add
html{ overflow-y: scroll;}
to your css.
Places a permanent (but sometimes empty) scroll bar on the window
The issue is most likely caused by the scrollbar appearing, which reduces the viewable area of the browser window and may adjust the contents accordingly.
There are a couple possible workarounds:
You could extend the length of the adjusted web-page so that the content (post-adjustment) also runs "below the fold"
Alternatively, you could encase everything in an absolute positioned DIV which won't "shake" when the viewable area contracts on the scrollbar's appearance.
Or -- depending on your specific content -- you could disable the scrollbar. Although this last workaround is only advisable in very specific cases.
body{
margin: 0;
}
seems to resolve this without having to add a dummy scrollbar :)
I had the same problem because of jQuery scroll where I was checking the scroll value and using that. I fixed my navigation bar by using addClass and removeClass, adding class was not working because I did not use !important in CSS class.
I have been fighting with this thing for several weeks now. I just can't figure it out.
I'm trying to prevent horizontal scrolling of the body when the menu is open. Here is a complete jsbin:
http://jsbin.com/vopeq/38/edit
Seems like any solution only undoes other things that are working the way I would like them to. So I added the requirements to the jsbin to keep track of which are satisfied with each version.
UPDATE
Maybe it's too good to be true, but I think I have all requirements satisfied, but I still need to check on android devices:
http://jsbin.com/vopeq/61
The thing I learned, that was tripping me up for so long and I didn't realize it, is that overflow: hidden on the <body> element, in Mobile Safari, doesn't do squat! I had to move my styles to prevent scrolling down one level of elements.
And Ed4 pointed me in the right direction. I needed to set overflow: hidden on the parent of the element I'm moving with left: 85% instead of the element itself (I was trying to do it all on the <body>).
So I have a body > .container, on which I do the overflow: hidden and body > .container > .content, which I push over using position: relative and left: 85%.
Your question is more of a design spec than a question, so rather than try to design the whole layout for you, I'll point out why your jsbin doesn't work.
Don't try to set left on body. If body is protruding offscreen, you're not going to be able to reliably stop scrolling.
Instead, keep body stationary with 100% width and height, so it can serve as your visible window boundary. When you want to lock the scrolling, you can set overflow: hidden on body. Handle the slide-over and scrolling menu with separate divs inside body.
I have an issue with my web page.
Basically, I have the <html> on overflow:hidden, two horizontal navbars, one fixed vertical sidebar on the left and in the remaining center, one div that has the height: 90% property.
Edit: The container div has the overflow: auto property.
The content is loaded in the container area via AJAX. The content consists mainly of tabular data, and the point is to have the container area scroll whenever there is too much content. Everything works nice and fine on a regular monitor with normal height, but when it's taken to a laptop, the last 1-2 rows become 'hidden' due to html overflow.
If i decrease the original height: 90% to a smaller value, problem fixed, but after I switch to large screen with the decreased height, the content area is not fully covered.
Is there a way to fix this issue via CSS? If not, is it possible via screen resize javascript event?
The easiest and probably the fastest way to do it would be using Javascript.
If you specifically set the height of your tabular data container, you will gain much more control over the layout and general item spacings.
When setting your height, you have to take into account the heights of your navbars, so in jQuery the code would look something like this:
function resizeMain()
{
$('#tabularBox').height($(window).height() - $('#topBar').height() - $('#bottomBar').height());
}
// size it on load:
$(function(){
resizeMain();
}
// and size it on resize
$(window).resize(resizeMain);
Of course, many ways to optimize this, but that's the idea. And you have to watchout for tiny screens, but this would be a problem with % anyway.
Finally, you need Overflow: auto; on our tabular box
in the div that is height:90% put overflow: auto or overflow: scroll. That'll add a scroll bar to that div only.
I am trying to use jQuery to handle the scroling, so I want to get rid of the browser's scroll bar... how do I do that?
well with css you could do that -> overflow:hidden on the body tag but you will not be able to scroll down anymore if the page is larger then the browser screen (unless you use your keyboard arrows)
Use CSS: overflow:hidden; will disable the scroll-bars of the element.
Not certain whether it will work on the whole page (ie at the body level), but you can always wrap your content in a div and style that.
The way to prevent the browser scroll bar using jQuery is to keep your document height less than your window height. Meaning you would need a wrapping div and make sure your content never exceeds the window height.
$(document).height();
$(window).height();
Not sure what you are trying to accomplish though.
as others have suggested you can use the CSS property
body{
overflow: hidden;
}
The actual use case would need to be presented to find which way would be best.
For finer control over which scrollbar to show and hide you can also use overflow-x and overflow-y. Browser support is a bit tricky. You can check it with this testcase if there is a solution for only get rid of the vertical scrollbar in your case.