CODEWITHSUNDEEP
javascripthtmlcssoverflow
matcygan
matcygan

Reputation: 725

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

Upvotes: 30

Views: 32835

Answers (3)

Ray Butterworth
Ray Butterworth

Reputation: 618

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>

Upvotes: 4

Tammibriggs
Tammibriggs

Reputation: 639

I had the same issue but I fixed mine with javascript since the CSS solution does not move the dropdown options when the parent has been scrolled horizontally.

Here is how I did it using JavaScript:

<style>
.outer-container {
  position: relative;
}

.container {
  display: flex;
  align-items: center; 
  gap: 20px; 
  width: 200px; 
  background-color: gainsboro;
  height: 70px;
  padding: 10px 20px;
  overflow-x: scroll; 
  margin: 0 auto;
  margin-top: 300px;
}

.content {
  cursor: pointer;
  display: block;
}

.content::after {
  content '&darr'
  display: block;
}

.content ul {
  position: absolute;
  background-color: black;
  color: white;
}
</style>

<div class='outer-container'>
  <div class='container' id='scrollable'>
    <span>Home</span>
    <span>About</span>
    <span class='content' id='content'>
      Dropdown
      <ul id='dropdown'>
        <li>option1</li>
        <li>option2</li>
        <li>option3</li>
        <li>option4</li>
      </ul>
    </span>
    <span>Contact</span>
  </div>
</div>

<script>
const scrollable = document.getElementById("scrollable")
const content = document.getElementById("content")
const dropdown = document.getElementById("dropdown")

scrollable.addEventListener(
  'scroll',
  () => {
    const contentRect = content.getBoundingClientRect()
    dropdown.style.left = contentRect.left + 'px'
  }
)
</script>

You can check it out on Codepen

Upvotes: 1

Adnan Khan
Adnan Khan

Reputation: 510

Add position: static to the parent element.

Upvotes: -1

Related Questions