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.
Related
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;
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
The container is an popup, so it must be block and absolute. It has a max-height and it can contain a table as my example:
http://jsfiddle.net/3rsaLcwe
.container
{
display: block;
position: absolute;
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
}
If table's height > it's height, only vertical scroll-bar is appeared but we must hide horizontal scroll-bar. However, the vertical-scroll-bar cover on table. Please help me to fix this problem. Note that the table's width is dynamic, horizontal scroll-bar must be hidden and vertical scroll-bar not cover on table. Thanks.
If i understood correctly what you mean, the scrollbar covers the table.
just add a padding to the container:
padding-right:10px;
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.