jsfiddle.net/etto2sdt/
What I'm trying to do is having a touch scrollable div. The body is set to 100% and I want to be able to scroll the contents inside #testnavwrapper
But it's not working... any ideas?
#testnavwrapper {
width: 100%;
overflow-x: scroll;
}
This will give you a horizontal scrollbar on the #testnavwrapper.
width: 2000px, as you put it, will have no effect as the overflow would occur on the body element (which has overflow set to hidden)
Hope it helps
Related
http://jsfiddle.net/BCTF9/
I have set the overflow as I want to restrict the height of the boxes and have a scroll show up when needed; so I added overflow-y: auto; as that generally does the trick. But now I see horizontal scroll bars on the second box in the example as well, though I'm not sure why?
I tried adding overflow-x: visible; but it didn't work. I don't want to set any widths on these boxes as they just need to be the width of the content + some padding.
You will also see the vertical scroll bars start too soon and don't allow the padding needed.
What can I do here?
jsfiddle Demo
Two reasons and fixes
The content in the second div taking too much width causing horizontal overflow, so increase the width
Instead of overflow-x:visible try overflow-x:hidden to hide horizontal scrollbar even if the width is higher
Try with this
CSS
.cat_list{ height:200px;
background:#e4e4e4;
width:200px;
overflow:hidden;
overflow-y:scroll;
overflow-x:hidden;}
HTML
<div class="cat_list"></div>
The scroll bars are appearing because there are many items in second div.
Try to remove these items, and they'll go away.
Fiddle
.cat_list {
overflow-y: auto;
overflow-x: hidden;
min-width: 200px;
padding: 10px;
}
Replace it
I got a div which is of fixed width and height:
#containersimg
{
width: 900px;
height: 135px;
}
And I have many images inside, with width 90px and height 120px. So i want to have my images all in a row, and show only horizontal scroll bar to scroll through the images.
I need to make this work in both FF and IE8 and above. I tried the overflow-x and overflow-y but I didn't helped.
Any idea?? Hope can get some help here... thanks...
You need a wrapping div inside your scrolling container to ensure that they are not constrained by width and then set overflow-x: scroll on the container. I've mocked up a quick fiddle to demonstrate. http://jsfiddle.net/vUEYG/
Give this a go :)
-ms-overflow-x: hidden;
Taken from this great resource CSS div element - how to show horizontal scroll bars only?
you can add first overflow:auto
#containersimg
{
width: 900px;
height: 135px;
overflow:auto;
overflow-x:hidden;
}
may help you
I have a div with a scollbar as a result of the CSS below. However, when there is no need to scroll, the bar is still there. There is no slider/arrows, but an emtpy bar is just there. Is there a way to only show the bar if the content overflows? Thanks.
#id{
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: scroll;
}
use
overflow: auto;
then overflow will only be displayed if it actually overflows
auto The behavior of auto isn’t specified in any detail in the CSS2.1
specification. In existing implementations it provides scrollbar(s)
when necessary, but it doesn’t show scrollbars unless the content
overflows the element’s box.
http://reference.sitepoint.com/css/overflow
Ok so I have a div that contains a few forms that have dynamically generated content. There are categories, that if you click on, slide/toggle down to reveal that categories sub-contents, or projects. Right now, I have it setup so that if the height of the div expands to exceed a set amount, a scroll bar shows up at the side, and the user can scroll down and see the content.
NOW I am being asked to get rid of the scroll bar, and just have the div's border (which is just 1px set in the css) height adjust dynamically with the height of the div's content...can I even do that? Is there some sort of jquery animation that would allow that? A point in the right direction would be greatly appreciated!! Thanks
You now probably have a height set on the container div:
#container {
height: xxpx;
overflow: scroll;
}
Just change that to a min-height:
#container {
min-height: xxpx;
overflow: visible;
}
The div will be at least xx pixels, and grow to fit after that.
I'm a css noob, and though I want this DIV to resize when the window is resized, I don't want inner content to change the size of it.
Use the overflow statement. e.g.
overflow: hidden; /* all content hidden as it spills over */
overflow: auto; /* Scroll bars appear on div when required to allow moving around */
overflow: scroll; /* Scroll bars will be present at all times */
Try using:
div {
overflow: hidden;
}
Read more here.
set overflow: hidden on the containing div
Have you looked into CSS and the overflow directive? You can use this to tell the div to scroll or truncate/hide its content when the content is too large.