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 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;
}

image explanation what I want to achieve

What container element do you use to create the drop down content?

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 .

What happens if we use overflow hidden?

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.

Does overflow hidden prevent scrolling?

To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML.

How do I add scrolls to overflow?

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:

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:

screenshot

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 &gt;
            <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>

Allow a drop-down element to overflow a container that has hidden or scrolled overflow

Tags:

javascript

html

css

overflow

matcygan

People also ask

1 Answers

Ray Butterworth

Recent Activity

Donate For Us

Allow a drop-down element to overflow a container that has hidden or scrolled overflow

Tags:

javascript

html

css

overflow

matcygan

People also ask

1 Answers

Ray Butterworth

Related questions

Recent Activity

Donate For Us