admin管理员组

文章数量:1201993

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: /

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

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

  • javascript
  • html
  • css
  • overflow
Share Improve this question edited Jul 26, 2021 at 18:14 Amal K 4,8542 gold badges26 silver badges51 bronze badges asked Sep 16, 2015 at 18:53 matcyganmatcygan 7251 gold badge5 silver badges10 bronze badges 4
  • 2 Sidenote: what about stop using tables for layout? You should use them only for data representation... – Lelio Faieta Commented Sep 16, 2015 at 19:02
  • Thanks for sidenote, but this is only simplified version of layout as you can see. Table is complex and used to present comparable data and dropdown is part of multiple-select. – matcygan Commented Sep 16, 2015 at 19:12
  • Table has nothing to problem anyway... Question edited – matcygan Commented Sep 16, 2015 at 19:41
  • You can set "height for "container" element – saleh katebi Commented May 14, 2019 at 13:01
Add a comment  | 

3 Answers 3

Reset to default 4

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

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

Add position: static to the parent element.

本文标签：

版权声明：本文标题：javascript - Allow a drop-down element to overflow a container that has hidden or scrolled overflow - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738627711a2103560.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。