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.
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.
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 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;
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