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!
Related
I am getting horizontal scroll on my HTML website layout all of a sudden and I cannot figure out how or why. Any tips?
This happens when an element's width is greater than the viewport width. This could be caused by text flowing outside of a container or another incorrectly sized element.
Good Fix
Use the inspector and start deleting elements one by one, eventually you'll delete an element that will remove the horizontal scroll. Note that you can CTRL-Z to undelete an element in the inspector. Once you've found the offending element you can inspect/adjust it's styles to fix the overflow.
Cheat Fix
Add overflow-x: hidden; styling to your body element.
This is not advisable though as it's not fixing the overflowing element, instead it's hiding the part that overflows.
After applying this: (to fix extra space on the right):
html {
width: auto !important;
overflow-x: hidden !important;
}
body {
width: auto !important;
overflow-x: hidden !important;
}
the vertical is no longer smooth, and sometime is stuck with the addressbar (for mobile devices).
is there a way to fix the vertical scroll?
im using bootstrap 3.1
Thanks.
Please check height definitions if there are any. Usually that's what causes a sticky vertical scroll in my experience.
Also, "extra space to the right" means you have defined widths "width:300px;" instead of percentages that are causing overflow, you should address these instead of trying to play around with the html/body.
Try inspecting elements until you find which element is causing your page to overflow, and change it's width to fit on a mobile screen, or convert it to a percentage of the total width of the screen so that it scales nicely.
If you give us more code, maybe even a website link we can give you a better answer, but you should never have to hide overflow, use auto width or overuse !important tags like that on the html/body.
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'm trying to create a form that has an expandable widget. The problem is that when the widget is open, The form extends outside the limit in the content box, and it looks bad.
I tried using overflow:scroll but it creates 2 ugly scrollbars that do not disappear even if the content is smaller then the content box. I only need one vertical scrollbar.
Visual Studio also alerted that overflow-y is not available in CSS.
Change your overflow to auto and define the height and/or width of the element.
overflow-x and overflow-y are part of the CSS3 proposal, and work in all of the current versions of the big four browsers.
I usually do:
overflow: auto;
overflow-x: auto;
overflow-y: auto;
The reason is that sometimes browsers treat overflow: auto as overflow: scroll (two ugly scrollbars) as soon as content overflows in one direction, but those browsers already support overflow-x and overflow-y, which get precedence.
Swilliams gave a good answer about how to treat the symptom. But, you might want to think about the root cause too - if the content box were not constrained to a fixed size, it could shrink and/or expand to fit any size form, without scroll bars. Web pages are flexible by design, and attempts to "fix" that flexibility usually end up running into problems of this sort.