我有一个带有下拉列表的模态。下拉菜单处于活动状态时-已被父级可滚动容器裁剪。我想使每个活动下拉列表在溢出上方可见。
已经尝试过在相对位置上滚动包装,该位置在可滚动容器上方。 不胜感激任何CSS / JS解决方案。
这是简化的示例:
$(document).click(function() {
$('.list').hide();
});
$(document).ready(function(){
$('.dropdown').click(function(event) {
$(this).children('.list').toggle("slide");
event.stopPropagation();
});
});
.modal {
width: 500px;
border: 1px solid black;
}
.header {
font-weight: bold;
padding: 20px;
}
.scrollable-content {
height: 120px;
overflow-y: auto;
border: 1px solid red;
}
.scrollable-content .row {
display: flex;
align-items: center;
height: 30px;
width: 100%;
padding: 4px 10px;
}
.footer {
display: flex;
justify-content: flex-end;
padding: 20px;
border: 1px solid black;
}
button {
margin-left: 20px;
}
.dropdown {
display: flex;
align-items: center;
margin-left: 20px;
padding: 4px 20px;
border: 1px solid black;
cursor: pointer;
position: relative;
}
.dropdown .list {
display: none;
background: #fff;
position: absolute;
top: 10px;
padding: 20px;
z-index: 2;
border: 1px solid green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal">
<div class="header">
Title
</div>
<div class="scrollable-content">
<div class="row">
<span>Row 1</span>
<div class="dropdown">
<span>Select</span>
<div class="list">
<div>Test test</div>
<div>Test test</div>
<div>Test test</div>
<div>Test test</div>
</div>
</div>
</div>
<div class="row">
<span>Row 2</span>
<div class="dropdown">
<span>Select</span>
<div class="list">
<div>Test test</div>
<div>Test test</div>
<div>Test test</div>
<div>Test test</div>
</div>
</div>
</div>
<div class="row">
<span>Row 3</span>
<div class="dropdown">
<span>Select</span>
<div class="list">
<div>Test test</div>
<div>Test test</div>
<div>Test test</div>
<div>Test test</div>
</div>
</div>
</div>
<div class="row">
<span>Row 4</span>
<div class="dropdown">
<span>Select</span>
<div class="list">
<div>Test test</div>
<div>Test test</div>
<div>Test test</div>
<div>Test test</div>
</div>
</div>
</div>
</div>
<div class="footer">
<button>Cancel</button>
<button>Submit</button>
</div>
</div>
答案 0 :(得分:0)
删除overflow-y: auto
。
.scrollable-content {
height: 120px;
/* overflow-y: auto; */
border: 1px solid red;
}