Sorry for the terrible title, but I couldn't describe my issue succinctly enough.
I'm noticing a weird behaviour having to do with the scrollbars.
I have a fixed menu on the left side of my web page. The menu is scrollable if the number of options inside are several.
JSFiddle example
When you scroll the menu, the scroll bar appears and is superimposed over the content. I'm okay with that... IF that's the case every time!
It used to be that the style:
overflow-y: scroll
would force a vertical scroll bar to be visible all the time and taking up its own space as part of the containing div's width. So what I ended up doing is having a fixed-sized outer div and then an inner div that's just 15px wider to hide the scroll bar.
#outer {
width: 200px;
overflow: hidden;
}
#inner {
width: 215px;
overflow-y: scroll;
}
But this behaviour doesn't seem to be consistent. At work, with the above styles, everything shows up just fine. The buttons sit at the right edge and do no get cut off on the right. But when I get home, or just am working elsewhere, the scrollbar does that hover-over thing, and now the buttons are extending off the edge and partially hidden.
I thought it might have been a cross-browser issue at first, but it's not. Has anyone met with this problem? Thanks!
P.S. - Before anyone mentions some 3rd-party menu/sidebar code. That's a no go. I have tried some, but because of work-specific requirements, I figured it's easier for me to write this myself rather than fight any quirks that disagree with our needs.
Related
I have a page with a semi-transparent sidebar with position: fixed; overlaying the rest of the page. The page has a scrollbar, but when the cursor is above the sidebar, the scrollwheel wont work.
When I was looking up this issue, I came across examples in which it just seems to work with no additional effort, like in this example: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_position2. But I just can't find why it doesn't work in my case.
Here's my code:
https://jsfiddle.net/c90zo62s/4/
(made it into a fiddle because stackoverflow kept refusing the snippet, while it was totally fine in the preview)
So when hovering the yellow area, I still want the Lorem ipsum bit to scroll, but it doesn't.
PS: I don't want to use pointer-events: none; as it has too many side-effects that are unwanted in this scenario
I finally found a fix.
The scrolling content was in a div with overflow: auto;. This div did actually cover the whole screen and was thus behind the fixed sidebar. I now removed this div and made the <body> the element that scrolls. Appearently that was all it took.
But then I still don't fully understand why an underlying div can't be scrolled through a fixed element, while the body can...
I have been building my site on Bootstrap for the first time and I'm having a problem that I can't find a solution of this. When I add some content and if its large and big enough to add a scroll bar in browser, whole page content moves towards left.
In simple words, If there is scrollbar, page content is moving to left like 17px and if not, it works okay. I don't want to add a perm scrollbar here like
overflow-y: scroll;
and if I add
width: 100vw;
It works fine and contents stays at its position even with scrollbar but if there is a vertical scroll bar, horizontal scroll appears too for no reason.
You have couple of solutions:
You can show your scroll permanently and style it accordingly to be a part of your page:
html {
overflow-y: scroll;
}
You can add:
padding-right: 40px;
as 40px is what I have heard is the max scroll size that you can get.
Create a parent div that will have all of your contents, then create a child that is slightly smaller, make it the way that changing parent size will not make child size to change.
You can create JS function that will detect if the scroll is displaying on the page, and it would change the margin settings.
You can use media queries to tackle the problem.
I'm trying to set up a page so that the navigation bar has a background that extends horizontally past the edges of the window, but the actual content of the page remains within a 960px wide container.
Here's a link to what I've got so far, it looks the way I want it to but there's a problem.
http://jsfiddle.net/pFDDV/3/
The problem is that the page will still scroll horizontally to the end of the over extended div, on the right side. It DOESN'T have this problem going left, only right (which I assume is due to the way elements deal with negative margins/positioning). I thought I might be able to just get away with:
body {
width: 100%;
overflow-x: hidden;
}
Which hides the bottom scroll bar, but you can still scroll right with the arrow key, and if you resize the page smaller than the 960px of actual content, you don't get a horizontal scrollbar like you should.
Is there any way I can make the page ignore the width of just that one div?
I'm 99.9% sure I saw this work somewhere, but I can't remember where, and research on the top/left, bottom/right rules of negative margin/positioning leads me to believe this just might not work. Any ideas?
Also: I know I could probably do this with a repeating background image, but I'm trying to avoid using images.
You can use position:absolute & write like this:
#mWrapper {
background: none repeat scroll 0 0 red;
height: 30px;
left: 0;
position: absolute;
right: 0;
}
check this http://jsfiddle.net/sandeep/pFDDV/5/
Are you expecting like this
http://jsfiddle.net/pFDDV/6/
I know there is an insanely simple solution to this, but for the life of me I just can't get it. I have a site, where the content width is 848px (strange I know), but there is an absolutely positioned div outside of it all with a width of 1496px. They are centrally aligned with one another, and I need a scrollbar to be added ONLY once the window is resized to be more narrow than the 848px. check it out at brianbattenfeld.com/fingers/
You could always use CSS Media Queries to detect the width of the browser then you could add scroll bars to the page/elements you want. I couldn't quite work out if you were after horizontal or vertical scrollbars when when the wideth gets to 848px as currently there is no horizontal scroll bars at all.
Maybe something like this would work (haven't tested as is only a rough guide)
#media (min-width:848px) {
html {
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: scroll;
}
}
Hope this is useful!
I am fixing bugs for IE7 and this one has me stumped. The content in this page is larger than its containing div. IE7 is properly displaying a vertical scroll bar but the content is getting on top of the vertical scroll bar and when the user clicks the scroll button the content doesn't move. I can't imagine what is causing this. Any Ideas?
EDIT: I Have attached a screenshot of the problem:
alt text http://img31.imageshack.us/img31/605/picture5kw.png
I think this is because IE7 and IE6 are not interpreting your overflow-x and overflow-y properties correctly:
#content_box {
float:left;
height:456px;
margin-left:20px;
overflow-x:hidden;
overflow-y:scroll;
this is easy to explain for IE6: It simply doesn't know those attributes. As for why it doesn't work in IE7, maybe the explanation is here (It's too complicated for me to understand, I haven't eaten lunch yet).
I think what might work (after a very cursory examination of your code, don't sue me if it doesn't) is to introduce an additional divcontainer with no width set. That would auto-adjust any width: 100% elements inside it in a way that prevents overflows. (I assume why this is a problem in the first place is box model issues in conjuction with margin-left: 20px, correct?)
IE7 scroll issue
Apply position: relative to container having the property overflow-y:auto;
e.g.
#content_box{
position: relative;
overflow-y:auto;
}
Above solution works for me.
Is it possible to set the width of .grey_box to hard-coded 510px? Because it looks like IE7 is the only one who gets this right, since #content_box is set to 530px with 10px padding, which would make all boxes inside 520px wide, and that is somewhere out into the scrollbar. Pekka might be into something as well, with IE7 and IE6 not implementing overflows correctly.