I have a table in a div and set my overflow:auto in this container div.
I get a horizontal scroll bar, but not a vertical one when there are many rows.
Whats the problem?
try overflow:scroll instead. Will force the scroll bars to appear - full description .
Alternatively it could be because you haven't set a height to the div (more likely). Try setting one and see if that improves things.
Alternatively has the container div got the height set too big so preventing the vertical scroll.
To be honest I'm trying it and I'm finding it hard to stop the horizontal scroll from appearing (as long it is scroll:auto)
Maybe I've missed (misunderstood) something.
Related
On this site here:
http://acp.studevent.co.uk/
I have a fixed div at the top which will act as a menu and a content div below containing everything else. I cannot figure out how to use overflow-y: scroll so that the pages scroll bar is only used for the content div and ignores the header div at the top.
PrimeFaces's layout/layoutUnit components do exactly what you needed. And if I'm not mistaken, they use javascript to calculate and set an height to the content. Each time you resize your page it recalculates the values.
You can check their showcase:
http://primefaces.org/showcase/ui/layoutFull.jsf
I dare say, you need to set a fixed height for overflow-y'to work. And one way to make it dynamic is to somehow calculate the necessary values.
Also you could make them have dynamically calculated fixed heights by using css positioning and left-right-top-bottom properties.
Best regards..
I have a website with a few <div>s set up similar to this example http://jsfiddle.net/kLQ5z/1/
The problem is that if a visitor has a small screen, the outerContent will be off-screen.
Normally, scrollbars would appear, but because I've set the <div>s up in such a hack-ish way, they don't appear, and you can't even use your mouse's horizontal scroll.
Any help?
I played with your jsFiddle, and here's something that seems to work. Basically, what I used was an iterative process:
To make scroll bars appear when the floating box goes off screen, it has to lie within the content area.
One way to do that is to give the main box a fixed left margin, but to keep it centered, we then need to wrap it in an outer div with margin: auto.
To keep it exactly centered, we also need to give it a matching right margin.
But ideally, if the screen is too narrow to show it fully, we'd like that margin to be squeezed out before any scrollbars appear. What works like that in CSS? Table cells! So instead of a fixed margin, we use an empty dummy div with display: table-cell.
It's still a hack, and I'd be surprised if it couldn't be improved. Nor have I tested it very well, but it seems to work on Chrome at least.
I have a div, it has overflow:auto and I have content that has a set width to it, (6 photos in a row) when there is no scrollbar they are fine, however when the content goes to force overflow to add a scrollbar instead of adding the scrollbar width to the width of the current div it just takes the space from the inline element space, forcing it to cut off the last photo, and have a bunch of extra whitespace where the additional space is left over. I am using min-width on the wrapper of the div with overflow auto. Is there anyway to fix this?
There isn't really much you can do about this. A couple ideas:
Use overflow:scroll to force the scroll bar to always display. That way there will be no surprises; it will be consistent.
Compensate for the width of the (possible) scroll bar in your initial CSS. This, unfortunately, will have to be a guess. 30px or so should be plenty.
Another thing to consider is reworking your design. Page elements with overflow:auto/scroll can sometimes be useful, but I hear they can have usability problems on some touch devices, and well, scroll bars are ugly ;)
I have a div which pops up into the middle of the screen and is populated with some arbitrary content. I need it to scroll if the content added doesn't fit within the space available.
The basic styling is left: 25%; width: 50%; max-height: 70%
If the screen is big enough it all works fine. In Firefox, if there's not enough space, it also works nicely, adding a vertical scrollbar to the division. But in IE, it adds an annoying and unrequired horizontal scrollbar, and I can't figure out a way to get rid of it.
You can see some screenshots of what I mean here:
http://dl.dropbox.com/u/15633144/popup.html
Sorry I can't post the actual HTML, which certainly doesn't make this any easier! But I'm hopeful this is a standard problem which people have worked around before.
The usual solution posted on here plenty of times is overflow-x / overflow-y. But in some cases the div contents do actually need to scroll horizontally, so I can't use this technique.
First IE don't support max-height CSS property.
And the horizontal scrollbar will show up if some elements inside your container have a width overflowing. You probably have some elements inside with a width:100%. As IE adds random borders/margins here and there, the width of inside elements become larger than its container.
try looking here
CSS div element - how to show horizontal scroll bars only?
I'm afraid that because you said that sometimes you need to scroll then you will need horizontal scrollbars. Which if you hid them by overflow-x: hidden; wouldn't allow you to scroll. You could work a jQuery If statement and say if window.width was more than the width of your content, show the scrollbar, if not, then hide it!
in my website designing side i meet one problem , even now also i don't know how to rectify that problem. any one help me
<div style="overflow:auto;height:535px; width:656px;position:absolute;" id="abit" runat="server" >
contents...
</div>
in this code i got scroll bar. but i don't want that scrollbar, but i want that actions, how to do this?
advance thx...
Your question is a bit unclear. Perhaps you should try another value:
overflow:scroll - Scrollbar is always present.
overflow:hidden - Extra content is clipped with no scrollbar.
Or perhaps a few moments looking at the other overflow options would answer your question.
Try removing the css height property. The scrollbar might appear because the content is higher that what the div could handle.
1) The scrollbar is appearing because the content of the div is larger than the fixed height of the div.
To get rid of the scrollbar, you can
1)Increase size of div
or
2)set style="overflow:hidden"
or
3)Remove the clamp you're setting, in other words, get rid of style="height:**px"