启用 "overflow-y: auto" 时,多 select 列表在 x 轴上被截断
Multi-select list getting cut off on x-axis when enabling "overflow-y: auto"
这是一个非常奇怪的问题,我 运行 在工作,所以请原谅我无法提供大量代码,但背景是我只是想为创建一个 sidenav页面的一些过滤器。在 sidenav 中,我有一个容器用于所有 Bootstrap 多 select 下拉菜单(来自此来源:http://davidstutz.de/bootstrap-multiselect/),我希望能够垂直滚动。我 运行 遇到的问题是,当我使用 overflow-y: auto
或 overflow-y: scroll
时,我看到一个奇怪的问题,即 multi-select 的列表将在过滤器 sidenav 的边缘,但是当我禁用它时,它会按照我的预期显示。
同样,这个 multi-select 来自 Bootstrap,但是在检查 css 时,multi-select 元素具有以下属性:
max-height: 350px;
overflow: hidden auto;
width: 397px;
position: absolute;
will-change: transform;
top: 0px;
left: 0px;
transform: translate3d(-130px, -352px, 0px);
z-index: 1000;
margin: 0.125rem 0 0;
所有这些多 select 元素的容器具有以下 CSS:
padding: 20px;
position: relative;
height: calc(100% - 70px);
z-index: 2;
overflow-y: auto; (<- Disabling this gives the desired display, but not scrolling behavior)
如果需要更多信息,我会尽我所能提供帮助。
我创建了一个小代码笔来捕捉我的问题的基本思想:https://codepen.io/dakotamaker1/pen/NWWeezb
如果有人有任何见解,这正是我正在寻找的,因为我无论如何都不是世界顶级 CSS 专家,并且对于这个半相关的问题没有真正明确的解决方案:Bootstrap-Multiselect: Dropdown is underneatch outer container if overflow-y is used。干杯。
这就是溢出的工作原理。当分配可见值以外的值时,它将创建一个新的 块格式化上下文 。这意味着内部内容将包含在溢出元素中。
看到这个link:https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context/
我不知道这是否能解释您要查找的内容,但请参阅我自己的解决方案。
我之前已经回答过这个问题,但我想我误解了这个问题,这就是为什么我的答案多次被编辑的原因,我的错。我只是在下面的解决方案中替换了这些 类、span.multiselect-native-select, .btn-group, .btn-group-vertical
中相对于 static 的位置,并对 js 进行了一些更新以确定选项持有者的正确位置和顶部位置。
$(document).ready(function() {
$('#multiple-checkboxes').multiselect({
includeSelectAllOption: true,
maxHeight: 350,
dropRight: true,
});
var position = $('.multiselect').position();
var height = $('.btn-group').height();
var right = ($(window).width() - ($('.btn-group').offset().left + $('.btn-group').outerWidth()));
$('.dropdown-menu.pull-right')
.css({
top: position.top + height,
right: right
});
});
.side {
position: absolute;
top: 0;
right: 0;
width: 200px;
background-color: red;
height: 100%;
}
.cont {
padding: 20px;
overflow-x: visible;
overflow-y: auto;
height: 90%;
}
.bottom {
height: 10%;
bottom: 0;
position: absolute;
}
span.multiselect-native-select, .btn-group, .btn-group-vertical {
position: static !important;
}
.dropdown-menu.pull-right {
/* top: 55px;
right: 50px !important; */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css">
<div class="side">
<div class='cont'>
<select id="multiple-checkboxes" multiple="multiple">
<option value="php">asdlkjfhalsdfjalsd;fha;sldkfja;sldkfja;lsdkjf;alsdkfja;sldkfja;sldkjfa;lsdkfja;lsdkfja;lsdkjf;al</option>
<option value="javascript">JavaScript</option>
<option value="java">Java</option>
<option value="sql">SQL</option>
<option value="jquery">Jquery</option>
<option value=".net">.Net</option>
</select>
<div class='bottom'>
<button> Apply</button>
</div>
</div>
</div>
我想有一个小的改变可以解决这个问题,尽管使用了 dropRight: true,如果你使用 dropRight: false 将解决这个问题,因为在这种情况下,它将开始从左边创建内容,从左边取适当的边距
请查看以下代码片段:
$(document).ready(function() {
$('#multiple-checkboxes').multiselect({
includeSelectAllOption: true,
maxHeight: 350,
dropRight: false,
});
});
.side {
position: absolute;
top: 0;
right: 0;
width: 200px;
background-color: red;
height: 100%;
}
.cont {
padding: 20px;
position: absolute;
overflow-y: auto;
height: 90%;
}
.bottom {
height: 10%;
bottom: 0;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css">
<div class="side">
<div class='cont'>
<select id="multiple-checkboxes" multiple="multiple">
<option value="php">asdlkjfhalsdfjalsd;fha;sldkfja;sldkfja;lsdkjf;alsdkfja;sldkfja;sldkjfa;lsdkfja;lsdkfja;lsdkjf;al</option>
<option value="javascript">JavaScript</option>
<option value="java">Java</option>
<option value="sql">SQL</option>
<option value="jquery">Jquery</option>
<option value=".net">.Net</option>
</select>
<div class='bottom'>
<button> Apply</button>
</div>
</div>
</div>
这是一个非常奇怪的问题,我 运行 在工作,所以请原谅我无法提供大量代码,但背景是我只是想为创建一个 sidenav页面的一些过滤器。在 sidenav 中,我有一个容器用于所有 Bootstrap 多 select 下拉菜单(来自此来源:http://davidstutz.de/bootstrap-multiselect/),我希望能够垂直滚动。我 运行 遇到的问题是,当我使用 overflow-y: auto
或 overflow-y: scroll
时,我看到一个奇怪的问题,即 multi-select 的列表将在过滤器 sidenav 的边缘,但是当我禁用它时,它会按照我的预期显示。
同样,这个 multi-select 来自 Bootstrap,但是在检查 css 时,multi-select 元素具有以下属性:
max-height: 350px;
overflow: hidden auto;
width: 397px;
position: absolute;
will-change: transform;
top: 0px;
left: 0px;
transform: translate3d(-130px, -352px, 0px);
z-index: 1000;
margin: 0.125rem 0 0;
所有这些多 select 元素的容器具有以下 CSS:
padding: 20px;
position: relative;
height: calc(100% - 70px);
z-index: 2;
overflow-y: auto; (<- Disabling this gives the desired display, but not scrolling behavior)
如果需要更多信息,我会尽我所能提供帮助。
我创建了一个小代码笔来捕捉我的问题的基本思想:https://codepen.io/dakotamaker1/pen/NWWeezb
如果有人有任何见解,这正是我正在寻找的,因为我无论如何都不是世界顶级 CSS 专家,并且对于这个半相关的问题没有真正明确的解决方案:Bootstrap-Multiselect: Dropdown is underneatch outer container if overflow-y is used。干杯。
这就是溢出的工作原理。当分配可见值以外的值时,它将创建一个新的 块格式化上下文 。这意味着内部内容将包含在溢出元素中。
看到这个link:https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context/
我不知道这是否能解释您要查找的内容,但请参阅我自己的解决方案。
我之前已经回答过这个问题,但我想我误解了这个问题,这就是为什么我的答案多次被编辑的原因,我的错。我只是在下面的解决方案中替换了这些 类、span.multiselect-native-select, .btn-group, .btn-group-vertical
中相对于 static 的位置,并对 js 进行了一些更新以确定选项持有者的正确位置和顶部位置。
$(document).ready(function() {
$('#multiple-checkboxes').multiselect({
includeSelectAllOption: true,
maxHeight: 350,
dropRight: true,
});
var position = $('.multiselect').position();
var height = $('.btn-group').height();
var right = ($(window).width() - ($('.btn-group').offset().left + $('.btn-group').outerWidth()));
$('.dropdown-menu.pull-right')
.css({
top: position.top + height,
right: right
});
});
.side {
position: absolute;
top: 0;
right: 0;
width: 200px;
background-color: red;
height: 100%;
}
.cont {
padding: 20px;
overflow-x: visible;
overflow-y: auto;
height: 90%;
}
.bottom {
height: 10%;
bottom: 0;
position: absolute;
}
span.multiselect-native-select, .btn-group, .btn-group-vertical {
position: static !important;
}
.dropdown-menu.pull-right {
/* top: 55px;
right: 50px !important; */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css">
<div class="side">
<div class='cont'>
<select id="multiple-checkboxes" multiple="multiple">
<option value="php">asdlkjfhalsdfjalsd;fha;sldkfja;sldkfja;lsdkjf;alsdkfja;sldkfja;sldkjfa;lsdkfja;lsdkfja;lsdkjf;al</option>
<option value="javascript">JavaScript</option>
<option value="java">Java</option>
<option value="sql">SQL</option>
<option value="jquery">Jquery</option>
<option value=".net">.Net</option>
</select>
<div class='bottom'>
<button> Apply</button>
</div>
</div>
</div>
我想有一个小的改变可以解决这个问题,尽管使用了 dropRight: true,如果你使用 dropRight: false 将解决这个问题,因为在这种情况下,它将开始从左边创建内容,从左边取适当的边距
请查看以下代码片段:
$(document).ready(function() {
$('#multiple-checkboxes').multiselect({
includeSelectAllOption: true,
maxHeight: 350,
dropRight: false,
});
});
.side {
position: absolute;
top: 0;
right: 0;
width: 200px;
background-color: red;
height: 100%;
}
.cont {
padding: 20px;
position: absolute;
overflow-y: auto;
height: 90%;
}
.bottom {
height: 10%;
bottom: 0;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css">
<div class="side">
<div class='cont'>
<select id="multiple-checkboxes" multiple="multiple">
<option value="php">asdlkjfhalsdfjalsd;fha;sldkfja;sldkfja;lsdkjf;alsdkfja;sldkfja;sldkjfa;lsdkfja;lsdkfja;lsdkjf;al</option>
<option value="javascript">JavaScript</option>
<option value="java">Java</option>
<option value="sql">SQL</option>
<option value="jquery">Jquery</option>
<option value=".net">.Net</option>
</select>
<div class='bottom'>
<button> Apply</button>
</div>
</div>
</div>