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. */
}
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 have one requirement to show vertical scroll and textbox TextBox_Inline_Issue element should be inline on a DIV. I'm using overflow-y:scroll and display:inline both css properties on the DIV. I'm able to get the vertical scroll after certain height but when I remove disply:inline, Textbox element comes down in second line instead being there in same line.
I'have attached screen shot for the reference.
.header-section{
max-height: 133px;
/*display: inline;*/
overflow-y: scroll;
}
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
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 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;