I have a div container and have defined its style as follows:
div#tbl-container
{
width: 600px;
overflow: auto;
scrollbar-base-color:#ffeaff
}
This gives me both horizontal and vertical scroll bars automatically once I populate my table which is contained by this div. I just want only horizontal scroll bars to appear automatically. I will modify the height of the table programmatically.
How do I do this?
you can also make it overflow: auto and give a maximum fixed height and width that way, when the text or whatever is in there, overflows it'll show only the required scrollbar
.box-author-txt {width:596px; float:left; padding:5px 0px 10px 10px; border:1px #dddddd solid; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -o-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; overflow-x: scroll; white-space: nowrap; overflow-y: hidden;}
.box-author-txt ul{ vertical-align:top; height:auto; display: inline-block; white-space: nowrap; margin:0 9px 0 0; padding:0px;}
.box-author-txt ul li{ list-style-type:none; width:140px; }
This solution is without height/width specification for the father div so it will be responsive to window resizing and most useful cause horizontal scrollbars appears just if needed.
.container{
padding:20px;
border:dotted 1px;
white-space:nowrap;
overflow-x:auto;
}
.box{
width:100px;
height:180px;
background-color: red;
margin:10px;
display:inline-block
}
Take a look at DEMO
I also had to add white-space: nowrap; to the style, otherwise elements would wrap down into the area that we're removing the ability to scroll to.
CSS3 has the overflow-x property, but I wouldn't expect great support for that. In CSS2 all you can do is set a general scroll policy and work your widths and heights not to mess them up.
I use the CSS properties :
1) "overflow-x: auto";
2) "overflow-y: hidden";
3) "white-space: nowrap";
Don't forget to set a Width, both for the container and inner DIVS components. The property "white-space : nowrap" allows the inner DIVS not to drop on a different line.
Considering the following HTML:
<div class="container">
<div class="inner-1"></div>
<div class="inner-2"></div>
<div class="inner-3"></div>
</div>
I use the following CSS to have an horizontal scroll only:
.container {
height: 80px;
width: 600px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
.inner-1,.inner-2,.inner-3 {
height: 60px;
max-width: 250px;
display: inline-block; /* this should fix it */
}
Fiddle: https://jsfiddle.net/qrjh93x8/ (not working with the above code)
.box-author-txt {width:596px; float:left; padding:5px 0px 10px 10px; border:1px #dddddd solid; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -o-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; overflow-x: scroll; white-space: nowrap; overflow-y: hidden;}
.box-author-txt ul{ vertical-align:top; height:auto; display: inline-block; white-space: nowrap; margin:0 9px 0 0; padding:0px;}
.box-author-txt ul li{ list-style-type:none; width:140px; }
To show both:
<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: scroll; padding-bottom:10px;"> </div>
Hide X Axis:
<div style="height:250px; width:550px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;"> </div>
Hide Y Axis:
<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;"> </div>
you can also make it overflow: auto and give a maximum fixed height and width that way, when the text or whatever is in there, overflows it'll show only the required scrollbar
Use the following
<div style="max-width:980px; overflow-x: scroll; white-space: nowrap;">
<table border="1" style="cellpadding:0; cellspacing:0; border:0; width=:100%;" >
CSS3 has the overflow-x property, but I wouldn't expect great support for that. In CSS2 all you can do is set a general scroll policy and work your widths and heights not to mess them up.
We should set to overflow: auto and hide a scrollbar which we don't use for working on unsupporting CSS3 browser.
Look at this CSS Overflow; XME.im
CSS3 has the overflow-x property, but I wouldn't expect great support for that. In CSS2 all you can do is set a general scroll policy and work your widths and heights not to mess them up.
you can also make it overflow: auto and give a maximum fixed height and width that way, when the text or whatever is in there, overflows it'll show only the required scrollbar
This solution is without height/width specification for the father div so it will be responsive to window resizing and most useful cause horizontal scrollbars appears just if needed.
.container{
padding:20px;
border:dotted 1px;
white-space:nowrap;
overflow-x:auto;
}
.box{
width:100px;
height:180px;
background-color: red;
margin:10px;
display:inline-block
}
Take a look at DEMO
I also had to add white-space: nowrap; to the style, otherwise elements would wrap down into the area that we're removing the ability to scroll to.
To show both:
<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: scroll; padding-bottom:10px;"> </div>
Hide X Axis:
<div style="height:250px; width:550px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;"> </div>
Hide Y Axis:
<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;"> </div>
Use the following
<div style="max-width:980px; overflow-x: scroll; white-space: nowrap;">
<table border="1" style="cellpadding:0; cellspacing:0; border:0; width=:100%;" >
CSS3 has the overflow-x property, but I wouldn't expect great support for that. In CSS2 all you can do is set a general scroll policy and work your widths and heights not to mess them up.
We should set to overflow: auto and hide a scrollbar which we don't use for working on unsupporting CSS3 browser.
Look at this CSS Overflow; XME.im
you can also make it overflow: auto and give a maximum fixed height and width that way, when the text or whatever is in there, overflows it'll show only the required scrollbar
Source: Stackoverflow.com