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.
Related
I created a horizontal scrolling page with a lot of images positioned next to each other. The images have to be positioned inline to align them vertically centered. Also they must not exceed and have to adapt to the viewport. To achieve the responsive effect I wrote a little JS-script that forces the browser to repaint the inline elements, which normally would only happen after reload.
Here is a fiddle.
My problem is: I want the .container to horizontally wrap all containing elements with no gaps between the images. Unfortunately almost every browser behaves different. To make it more visual I colored the .container in grey and gave the wrapping ul a green border.
In Firefox, Opera and modern IE all images are wrapped perfectly if I add float: left; to the .container. However this has no effect in Chrome and Safari: The wrapping ends with the width of the viewport.
Do you have a solution how to achieve the same effect in Webkit browsers?
Additionally, if I decrease the height of the viewport, gaps appear next to some of the images (but not in Safari ...). Those gaps look like a padding within the list elements, all different in size. If I remove the horizontal scrollbar with overflow: hidden; the gaps disappear in Chrome, but not in Firefox. In IE the gaps are even wider.
In HTML I already removed all white-space characters.
What's the cause of those gaps and how can I remove them in every browser?
Thanks for your help!
I am trying to implement a DIV which contains some text, and behaves the following way:
Fixed width (500px)
Capped height (Up to 400 px)
If the text renders to <400px (say, 100px tall), the containing DIV is as much height as text (100px in our example).
If the text renders to >400px, the containing div is only 400px in height, and oveflow is handled via a vertical scrollbar in the DIV.
I know how to implement #2 (overflow: auto; position: relative) but that behavior depends on having height=400px which of course negates #1 desired behavior.
How can this be achieved via CSS?
I'd prefer a reasonably cross-platform soluion, if that's too hard, must work on IE7, IE8 and FireFox 10+.
Try a combination of max-height and overflow: auto;.
Example.
You can use the max-height property rather than height, but it won't work in IE6, which doesn't respect any min/max properties.
If IE6 usage is a must, you will have to fall back on Javascript (the only other method is with IE's proprietary CSS expressions, but they're very poor-performance and rely on JS to be enabled anyway).
If you look at www.ijob.dk in IE7 and IE8, the horizontal scrollbar is MUCH larger than on ex: Firefox or IE9 (Don't even think the scrollbar shows in ie9) - Can't seem to figure out that is causing the big space at the right, since the horizontal scrolling is so large?
From your comment i understand now that you meant the horizontal scrollbar, just add this to your CSS to hide it:
html {
overflow-x: hidden;
}
There is some renegade element that is creating that extra few pixels of horizontal space that needs to be checked, but i think it is ok to just hide it, since your design is top-bottom.
How can I get this CSS declaration to work in IE6 please?
#mask{width:725px;height:495px;margin:0;border:0;padding:0;overflow:hidden;}
The problem is the content which is much larger than 725px and exactly 495px (much like a horizontal scrolling thingy) does not get hidden in IE6.
Edit:
1. The background images of the hidden divs shows.
2. I am also using Twin-Helix PNG Fix 2.0 Alpha.
Thank you.
This will be happening because you have relatively positioned elements inside your #mask container.
This is due to a bug where relatively positioned children are not correctly clipped and hidden for a parent element with overflow: hidden applied in Internet Explorer 6 and 7. The same problem also exists for overflow: auto and undoubtedly overflow: scroll as well.
It can be fixed by also applying position: relative to the element you are setting the overflow on.
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;