这是我在工作中遇到的一个非常奇怪的问题,请原谅我无法提供大量的代码,但是背景是我只是试图为页面的某些过滤器创建一个sidenav。在sidenav中,我有一个容器,用于我们希望能够垂直滚动的所有Bootstrap多选下拉菜单(来自此来源:http://davidstutz.de/bootstrap-multiselect/)。我遇到的问题是,当我使用overflow-y: autooverflow-y: scroll时,我看到一个奇怪的问题,即多选列表在过滤器sidenav的边缘会被截断,但是当我禁用它时就像我期望的那样显示。

同样,此多选来自Bootstrap,但是在检查css时,多选元素具有以下属性:

    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;


我所有这些多选元素的容器都具有以下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)


如果需要更多信息,我会在可能的地方提供帮助。

我创建了一个小的Codepen,它捕获了我的问题的基本思想:https://codepen.io/dakotamaker1/pen/NWWeezb

如果有人有我真正想要的见识,因为无论如何我都不是世界上最顶尖的CSS专家,并且在这个半相关的问题上还没有真正明确的解决方案:Bootstrap-Multiselect: Dropdown is underneatch outer container if overflow-y is used。干杯。

最佳答案

我不知道这是否可以解释您要寻找的内容,但是请参阅我自己的解决方案。

我之前已经回答了这个问题,但我认为我误解了这个问题,这就是为什么我的答案可能被编辑的原因有时可能是糟糕的。我只是替换了这些类中相对于静态的位置,在下面的解决方案中为span.multiselect-native-select, .btn-group, .btn-group-vertical,并对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>

关于css - 启用“overflow-y:auto”时,多选列表在x轴上被切断,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58884102/

10-11 10:52