I have created a selection box using <ul> and <li> elements. Some of the list items are wider than the parent box, so I used an :after pseudo-element to overlay them with full content when hovered over.
Everything was working perfectly, until I noticed that when the <ul> element has a vertical scrollbar, the overlay is hidden and a horizontal scrollbar appears.
Is there a way to display the child overlay on top of the parent's vertical scrollbar?
Here is a link to the JSFiddle for reference: http://jsfiddle.net/x9TZB/14/ (works in Chrome but causing issues in IE10).
UPDATE:
I managed to partially solve this issue by adding another <div> element to the DOM, positioning it over the <li> element, and setting up events and timers. There are still some minor problems, especially since IE does not support pointer-events:none.
I will keep this question open in case someone finds a better solution or as a suggestion for updating the HTML5 standard layout rules :-)
The code is also provided here in case the JSFiddle page disappears. You can try adding/removing the "scrolling" class from the <ul> element to see the difference.
-- CSS --
ul {
position: absolute;
display: block;
margin: 0;
list-style-type: none;
border: 1px solid #aaaaaa;
width: 150px;
font: 12px verdana, arial, sans-serif;
padding: 0;
overflow-x: visible;
}
ul.scrolling {
overflow-y: scroll;
margin-right: -16px;
}
li {
position: relative;
margin: 0;
padding: 0 5px;
line-height: 25px;
text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
white-space: nowrap;
color: black;
cursor: pointer;
overflow: hidden;
}
ul.scrolling > li {
padding-right: 6px;
}
li:hover {
background-color: #c7e0ff;
overflow: visible;
}
li:hover:after {
content: attr(contents);
position: absolute;
left: 0;
top: 0;
padding: 0 5px;
z-index: 999999;
background-color: #c7e0ff;
}
-- HTML --
<ul class="scrolling">
<li>Lorem ipsum</li>
<li>Dolor sit amet</li>
<li>Consectetur adipisicing elit</li>
<li>Sed do eiusmod tempor</li>
<li>Incididunt ut labore et dolore</li>
<li>Magna aliqua</li>
<li>Ut enim ad minim veniam</li>
<li>Quis nostrud exercitation</li>
<li>Ullamco laboris nisi ut</li>
<li>Aliquip ex ea commodo consequat</li>
<li>Duis aute irure dolor</li>
<li>In reprehenderit</li>
<li>In voluptate velit esse</li>
<li>Cillum dolore eu fugiat nulla pariatur</li>
<li>Excepteur sint occaecat</li>
<li>Cupidatat non proident</li>
<li>Sunt in culpa qui officia</li>
<li>Deserunt mollit anim id est laborum</li>
</ul>
-- JavaScript (using jQuery) --
//Make sure this is run after the DOM is ready.
$('li').each(function () {
$(this).attr('contents', $(this).html());
});