I have defined a tag with a CSS attribute "overflow" set to "scroll". This is giving me both the vertical and the horizontal scroll bars. I only want the vertical scroll bar. What should i do?
You could try using the
overflow-y: scroll;
This will give you a vertical scroll-bar...
Using
overflow-y: auto;
will only show the scrollbar if it is necessary.
Try using "overflow-y: scroll;" instead. It's CSS3, but as far as I know, it's supported by every modern browser (IE6+, FF, Opera, Chrome/Safari/WebKit/etc.).
A quick explanation of the various overflow/-x/-y values, for those not familiar with them:
visible – The default. Content which does not fit "overflows" the box, usually appearing over or under adjacent content.
hidden – Content which does not fit is "guillotined" — cut off at the edges of the box.
auto – Content which does not fit causes a scroll bar to appear. Does not necessarily cause both scroll bars to appear at once; if content fits horizontally but not vertically, only a vertical scroll bar will appear.
scroll – Similar to auto, but scroll bar(s) appear whether needed or not. AFAIK, mostly used to prevent centered content from "jumping" if a scroll bar needs to be added to dynamic (e.g. AJAX) content.
overflow:auto;
I realize this is a very old question but I stumbled across it today. If, like me, you only want the y-scrollbar and then only when it's needed, I found this works:
.myclass {
overflow-x: hidden;
overflow-y: auto;
}
Cheers, Mark
overflow-x:hidden;
overflow-y:scroll;
Related
To show a list of completions, I need an absolutely positioned element to take the width of its content, and scroll vertically when necessary. The problem is that the way CSS computes the width of an absolutely positioned element seems to not leave space for the scrollbar, causing the last characters of the widest completion to be hidden below the scrollbar (on platforms where scrollbars take up space).
(Edit: It was pointed out to me that this works by default in Chrome now, though Firefox and Safari still have the issue. It may not be a problem with standard CSS, but with implementations.)
The styles look like this, with a sequence of completion elements inside the completion-list:
.completion-list {
overflow: hidden auto;
max-height: 5em;
position: absolute;
}
.completion {
white-space: nowrap;
}
You can see it in action in this codesandbox.
Adding a padding to make space for the scrollbar isn't a great solution, because it'll also show up when there is no scrollbar (and scrollbar width is platform-dependent). I'd really prefer not to use JavaScript to dynamically measure the bar width and kludge in the space.
Tested Safari, Chrome and Firefox on MacOS. The scrollbar takes up zero space. It overlaps the text when scrolling, but disappears when you stop scrolling. I have no problems at all with this user experience.
I'm trying to add some decorative flourishes on a page footer with :after pseudo-element.
The problem is that depending on my css code the decorative flourish element(fixed size, uses background image) either gets clipped by the footer or ends up extending the page height and adds vertical scroll bars.
What I need is the decorative element to start at the footer top border(in other words where the page content ends) and clip at page bottom(or if screen space allows, don't clip at all).
I'm able to provide a link to the code later if my question isn't clear enough.
EDIT: In other words, I'd like to know if there is any sane way to prevent vertical scrollbars from appearing when the bottom edge of a specific absolutely positioned element goes over the page bottom.
EDIT2: The site is currently available at http://www.ikimark.fi/ikimark_uusi/site
The decoration in question is the right bottom corner flourish image. I'm editing the site today so the code may change.
Please provide a link to your project and try using position:absolute;z-index:9999;
EDIT:
well I'm still confused about exactly what you are asking for. If you want flourish image not to cover too much space below the contents and fill up the total height of the footer only then please add overflow: hidden; at your wrap div. And if you don't want this then please can you explain?
Try setting an absolute height on the bottom div with overflow-y: hidden as follows:
<div id="footer" style="height: 4em; overflow-y: hidden"></div>
In my current markup, I have two scroll boxes in the dashboard div. I want the gray highlight around the selected task to stretch and meet the highlight around the info box to it's right. Is there a way to do that?
http://jsfiddle.net/rEKwb/2/
Thanks!
edit:
OK, this is what it looks like now.
http://img.photobucket.com/albums/v410/justice4all_quiet/what_it_do.jpg
The gray box around the green box is cut off. I'd like it to stretch to meet the gray border to the right of it, which is in a separate scroll box.
This is what I want it to look like.
http://img.photobucket.com/albums/v410/justice4all_quiet/example.jpg
There is always the space for the scrollbar, even if its not in use.
If you can force the scrollbar to the left, you will get rid of the gap on the right.
You can try changing text direction, to force the scrollbar to the left:
direction: rtl;
I think because you have your <section id="tasks"> with a style of overflow: scroll; it will create a horizontal scroll bar if you try and stretch the <div id="selected_task"> beyond its parents defined width. Basically you can't have elements that are within a overflow: scroll; ignore the scroll rule and render outside of the box... it will always create horizontal scroll bar to manage the extended content.
A workaround may be to use a jQuery scroll bar plugin and play with position:relative and z-index values of your divs sense these plugins usuall use a combination of divs to create their scroll bars and not the browsers scroll bar.
What is wrong here?
There is just no way I can get the div (the gray area behind the video) to expand with the content... I get scrollbars instead?
Please help Thanks, Marcus
Try scrolling over the video gray box area. It's the grey area 'main' that I want to expand instead of scrollbars showing.
http://bestofyoutube.com/go/cssprob
Remove the height of your videoarea, the reason the scrollbars are showing up is because the vote area is pushing it down due to the floating. That blank space on top is exactly how much extra scroll area you're getting.
Well, for starters.. you have invalid markup.
Invalid markup is the #1 reason for things acting strangely.
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.peekpod.com%2Fminnie&charset=%28detect+automatically%29&doctype=Inline&group=0
However, the reason you have scrollbars is that you're using overflow: auto, if you don't want them then use overflow: none;
However, when using overflow: none; things are even more messed up do to all your floats.
I am working on a site design in which the main content area is centered via margin: auto and has a fixed width.
I would like to place another element slightly outside of this fixed width (off to the right, in my case) without affecting the overflow scrolling of the center content area.
Perhaps this is better explained with an example: http://jsfiddle.net/rxje6/
In this example, try shrinking the bottom right pane and notice how the bottom scroll bar appears immediately after the orange goes out of view. Although this is the default behavior, this is not what I want. I prefer the scroll bar to only appear once the gray area is obscured and the orange to be hidden out of view.
I've tried absolute positioning, but the scroll bar still appears. Using overflow: hidden on the primary navigation div works, but simply chops off the overflowing orange.
Any help is much appreciated!
P.S. Stackoverflow's tag helper seems to be down at the moment, so I'm placing this under css for now since I can't think of any others.
One method is to wrap everything in a new div:
#container {
overflow-x: hidden;
min-width: 400px
}
See: http://jsfiddle.net/thirtydot/rxje6/1/