In IE, scrollbars appear on the inside of a div - which you could argue is the correct solution. Other browsers, e.g. Chrome, place the scrollbars on the outside of the content.
If I want to always a vertical scrollbar visible for the div, as below:
<div style="height: 200px; overflow-y: scroll;">
<div style="height: 200px; width: 100%; background: #DDD;"></div>
</div>
In IE; because there is a vertical scrollbar, it means the scrollbar is hiding some content behind it and shows a horizontal scrollbar to see the content (and then shows there is vertical content to scroll to to make up for the new scrollbar!). In Chrome, the vertical scrollbar pushes the content in, so that there is no hidden content and therefore, the horizontal scrollbar does not appear.
I want all content visible. Is there a simple cross browser way to get the scrollbars to display consistently?
Ultimately, I have a 100% width table and I just want to scroll it vertically with a fixed height.
I am running in IE7 standards, IE8 seems to deal with scrollbars the same as Chrome etc..
Adjust the width of the table, so that it won't exceed the length of the scroll bar.
I generally think it's just a problem with the way IE works.
Related
How to add scroll to a block element?
I've used overflow-y: scroll, but it immediately creates a scrollbar. I want scrolling after my div has reached a specific height.
You should use overflow-y: auto to get scroll after fulfilling the height of an element.
auto Depends on the user agent. If content fits inside the padding box, it looks the same as visible, but still establishes a new block-formatting context. Desktop browsers provide scrollbars if content overflows. - MDN
Whereas scroll Content is clipped if necessary to fit vertically in the padding box. Browsers display scrollbars whether or not any content is actually clipped. (This prevents scrollbars from appearing or disappearing when the content changes.) Printers may still print overflowing content. - MDN
First you have to give a proper height and width of your content area where you have to overflow.
You have a <div> which has more content than your area than you can use overflow tag with scroll.....
width: #;
height: #;
overflow: scroll;
I display 2 graphics either side of my page content. When the browser/page width narrows these items are cropped off the screen to allow more room for the content. This is mainly
.page {
height: 100%;
min-height: 100%;
overflow-x: hidden;
overflow-y: auto;
min-width: 960px;
}
That all works fine but I have a min-width set on the .page div which wraps around all the content and is the next element after the opening body tag. I've just realised that when the browser width goes below the min-width the vertical scroll bar disappears from the side of the page.
Here's a CodePen of the issue: https://codepen.io/moy/pen/oemBEN
Presumably that is because the body is now in view but the .page element remains at it's set min-width ...makes sense.
However, the reason I set the overflow on the .page element in the first place is because of an issue I was having when it was set on the body. An issue I thought I'd resolved by applying the code this way.
If I move the following code to the body:
overflow-x: hidden;
overflow-y: auto;
All appears to work as I'd like it to. The items either side of the content area are cropped and the vertical scroll bar remains in view when the content is long enough in Chrome + FireFox on Mac. If I check the page in Safari (Mac) or IE on Windows the side items are't cropped correctly.
If you scale the browser down and then click on the background and drag right you can reveal the cropped area of the page and it looks messy!
Is there a way around this? Or will I need to make do with the vertical scroll bar hiding?
You can use the flex layout for this:
https://codepen.io/anon/pen/EvrXmG
The .container element starts the flex layout.
The .img elements have a width and flex-basis set to it and are not allowed to grow but to shrink, resulting in a "max-width".
The .wrap elements have a width and flex-basis set to it and is not allowed to shrink but to grow, resulting in a "min-width".
If the page gets bigger the .img elements stay at the max size but the content acquires all free space.
if the page gets smaller, the content stays at its minimal width ant the image elements start to disappear.
This solution is probably not safe for old browsers but one of the easiest solutions for modern browsers Browser compatibility.
I have a div with the following css:
overflow: scroll;
However, it appears that there's a border being added by the browser (?) where the scrollbar should appear if it was visible (even if it is not visible). I have inspected the css within dev tools, and cannot find a reference to this styling. How do I hide this scrollbar styling?
Here's an example screenshot - the red arrow points at the right edge of the screen, I did not add that border styling. It disappears if I remove the overflow: scroll; style rule.
Note, I am seeing this behavior in both Chrome and Safari (latest versions of both).
Setting the overflow property to 'scroll' clips the content to size. This prevents the content from exceeding it's container borders horizontally and vertically. It also places a scrollbar horizontally and vertically, regardless of whether it is needed or not.
This will display both scroll bars:
<div id="div1">
Content
</div>
#div1 {
overflow:scroll;
}
The 'auto' value will display a scroll bar vertically, horizontally or both as required.
Change the CSS to:
#div1 {
overflow:auto;
}
You can also set the overflow property for horizontal or vertical only. You can use this over auto if you want to guarantee there can't be a vertical scroll bar.
Change the CSS to:
#div1 {
overflow-x:scroll; /* Set the overflow horizontal property to clip the content
and display a horizontal scroll bar. */
}
overflow-y:hidden; /* Set the overflow vertical property to clip the content,
hide the vertical scroll bar and any content outside of the top/bottom borders. */
}
I have a div with the property:
overflow-y: scroll;
On IE11 (havent tested other versions of IE yet) the div has a vertical grey scroll bar. Is there a way to remove this? But still maintain the overflow scroll?
I searched SO for an answer but only could find one relating to the body scroll bars and not a div.
Use auto property
overflow-y: auto;
scroll will always add scrollbar whether content is overflown or not. Using auto will show the scrollbar only when content is overflown.
MDN Doc
I would like to fix my navigation bar to the top of the browser window, but allow horizontal scroll for nav items for nav items that may have overflowed when the browser width is decreased. An example is the gmail nav bar being fix to top but still horizontally scrollable when the window width is decreased.
Currently I use the following css for the div which fixes the div to top but does not allow horizontal scrolling because it is fixed(tried overflow:scroll but doesn't do anything):
position: fixed;
top:0
overflow:scroll;//does nothing
If you give it a right and left value, it should scroll: http://jsbin.com/edopor/4/edit
If overflow:auto; doesn't work it may be the possible lack of a doctype.