Menu
I have horizontally scrollable container and opened dropdown inside (position: absolute). I want the opened dropdown to overflow vertically this container. overflow-y: visible doesn't work and container is scrollable vertically anyway.
Here is simplified example: http://jsfiddle.net/matcygan/4rbvewn8/7/
HTML
<div class="container">
<div>
<div class="dd-toggle">Dropdown toggle
<div class="dd-list">Opened drop down list</div>
</div>
</div>
</div>
CSS
.container {
width: 200px;
overflow-x: scroll;
overflow-y: visible;
}
.container >div {
width: 300px;
}
.dd-toggle {
position: relative;
background: grey;
line-height: 40px;
}
.dd-list {
position: absolute;
top: 90%;
background: #ff9c00;
width: 70px;
}
802
Use a container element (like <div>) to create the dropdown content and add whatever you want inside of it. Wrap a <div> element around the elements to position the dropdown content correctly with CSS. CSS) The .
hidden - The overflow is clipped, and the rest of the content will be invisible. scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content. auto - Similar to scroll , but it adds scrollbars only when necessary.
To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML.
You need to add style="overflow-y:scroll;" to the div tag. (This will force a scrollbar on the vertical).
It can be done, but requires three levels of control:
For this:
Try this:
<!DOCTYPE html>
<html>
<head>
<title>Popout Test</title>
<meta charset="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>
<div class="container">
<ol class="content">
<li>Alpha</li>
<li>Bravo</li>
<li>Charlie >
<ul class="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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
