I am creating a <div> with a class someClass
.someClass {
overflow:scroll
/*other props*/
}
The problem is that the scrollbars are always visible even when the data is not overflowing. I want the scrollbars to be visible only when data actually overflows.
overflow:auto; should do it. You need to set a width (for horizontal scrolling) and height (vertical) for that to pop out scrollbars at the right time though.
Use overflow: auto;
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. */
}
We've a problem in a website with Microsoft Edge. Some vertical scrollbars are visible in the .ic3-report-content-container. Check website here
The CSS is:
.ic3-report-content-container {
height: 100%;
overflow:auto;
}
How is it possible that, with a height of 100%, Edge is showing a vertical overflow?
The containers div - parent .ic3-report-editor - has the correct height. Somehow the height of this div is smaller (no borders, no padding, no margins...)
Removing the overflow or putting overflow-x:auto; and overflow-y:hidden; fixes the issue. Is this normal, or an Edge bug?
The inner content of the div.ic3-report-content-container exceeds the boundaries of the box, so simply add:
.ic3-report-content-container {overflow: hidden;}
to get rid of the scroll.
i have a div named panel, CSS of whose is
.msg_panel
{
width:100px;
height:45px;
max-height:200px;
padding: 3px;
overflow-y:scroll;
overflow-x:hidden;
}
now even if height of panel is not larger than the max-height, i am getting the scrollbar visible(you can see in the pic).
I want scrollbar visible only if max-height is attained.
i tried javascript, but can it be done only in css
Set the overflow-y property to auto
Working Example http://jsfiddle.net/TLwcX/1/
Set overflow-y to auto which removes the vertical scroll and it will appear only if the content exceeds your max-height of 200px...
.msg_panel
{
overflow-y:auto;
}
You have explicitly stated that you need vertical scroll always visible: overflow-y: scroll;
To let browser decide when to show the scroll use this: overflow-y: auto;