I have set overflow: hidden for my body to keep the contents only inside the viewport and to disable scrolling. Body height is fixed.
But I have a component which should have the ability to scroll horizontally.
Since I have hidden overflow in body, now I can't enable scrolling in that component.
Any solution?
Add this to your component style:
height: 100vh;
overflow: auto;
You can add in style-sheet:
overflow-x:auto;
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 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;
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;