Allow A Drop-down Element To Overflow A Container That Has Hidden Or Scrolled Overflow
I have horizontally scrollable container and opened dropdown inside (position: absolute). I want the opened dropdown to overflow vertically this container. overflow-y: visible does
Solution 1:
It can be done, but requires three levels of control:
- The outer container exists to establish the relative positioning.
- Its content container controls the size and overflow.
- The drop-down container reacts to the cursor.
For this:
Try this:
<!DOCTYPE html><html><head><title>Popout Test</title><metacharset="UTF-8" /><style>.container {
position: relative;
}
.content {
width: 10em;
max-height: 5em;
overflow: scroll;
}
.dropdown {
position: absolute;
background-color: #CCC;
overflow: visible;
display: none;
}
:hover>.dropdown {
display: block;
}
</style></head><body><h1>Popout Test</h1><divclass="container"><olclass="content"><li>Alpha</li><li>Bravo</li><li>Charlie ><ulclass="dropdown"><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li></ul></li><li>Delta</li><li>Echo</li><li>Foxtrot</li><li>Golf</li></ol></div></body></html>Solution 2:
Add position: static to the parent element.
Post a Comment for "Allow A Drop-down Element To Overflow A Container That Has Hidden Or Scrolled Overflow"