Is it possible to achieve only horizontal overflow in CSS 2.1?
overflow: auto;
Will cause a block element to have both horizontal and vertical scrollbars. I want a block element (let's say <div>) which will display only horizontal scrollbars. How do I do that?
Try overflow-x: auto;
It even works in IE6!
I tried overflow-x: hidden; and that worked for me.
overflow-x: clip;
Was what I needed
Related
When I give height 100% to body tag its display horizontal scroll. I don't know where it comes from but when I set body height to 100% it displays a horizontal scroll.
use overflow-x: hidden;
I reccoman you learn about overflow:https://www.w3schools.com/css/css_overflow.asp
body{
overflow-x: hidden;
}
You can use overflow-x: hidden;
But this will hide scrollbar even if the data on the page is more than the height of the page.
If that is the case, you may use overflow-x: auto; which will hide/show the scrollbar based on content on the page.
How would I use overflow-x: hidden on the body, but keep overflow-y: scroll?
I just put overflow: hidden on the body, and it worked (no scrolling on either axis). But when I try to specify an axis, like overflow-x: hidden, suddenly both axes become scrollable.
This should apply only to the body- I don't want to wrap anything inside a "wrapper" div.
This works, but cause both axes to not scroll:
body {
overflow: hidden;
}
This causes both axes to scroll:
body {
overflow-x: hidden;
}
The only thing inside the body is an absolutely positioned element.
I've concluded that this is probably a bug in WebKit. According to this link:
https://css-tricks.com/findingfixing-unintended-body-overflow/
the author mentions this exact problem of specifying an axis inside body. It looks like you would have to use a wrapper div, as mentioned in other questions.
I tried incorporating scroll to my overflowing div element in CSS
using the overflow property. But it is attaching both vertical and horizontal scrollbars. I only need vertical scroll. How can I accomplish this with the least lines of code and no javascript or frameworks? Thanks.
.div{
overflow: scroll;
}
overflow-x for horizontal scroll
overflow-y for vertical scroll
So...
.div { overflow-y: scroll; }
Read more at MDN:
overflow-y
overflow-x
overflow
I have a div with propertie overflow auto. How to make the content of this div horizontally aligned with and without the scrollbar displayed. The scrollbar is messing with the div width. I hope you understand.
overflow-x: scroll;
overflow-y: hidden;
source: Div with horizontal scrolling only
Try using overflow-y: overlay instead.
.your-content{
overflow-y: overlay;
}
NOTE::: overflow-y: overlay has been deprecated.
But this will make the scrollbar appear as an overlay without affecting the width of div or element.
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;