引导下拉切断behined滚动容器(Bootstrap dropdown cut off behin

我面临着自举下拉的问题。 我的下拉列表是一个滚动的内div与修复的高度。

当我点击下拉，菜单将出现在滚动内容后面。 而正常select工作完全正常。

这里是小提琴这表明我所面临的问题。

我试图用position: fixed到.dropdown-menu类但也不能正常工作。

是否有任何变通，而不使用JQuery？

Answer 1:

作为下拉具有CSS position: absolute和它是具有CSS的容器下position: relative 。 因此溶液中使用是困难的（但是可能） z-index 。

然而，解决方案将使用易于position: fixed与其父的正确计算top offset值。

$('.btn-group .dropdown-toggle').click(function(){
    var topPos = $(this).offset().top + $(this).outerHeight();
    $(this).siblings('.dropdown-menu').css({'position':'fixed', 'top':topPos, 'left':'auto'});
})

退房修改的jsfiddle 。

Soution 2-（如果你可以编辑源的HTML）

最简单的是修改源HTML像下面

<select class="form-control">
    <option selected>Default</option>
    <option>1</option>
    <option>2</option>
</select>

检查这个例子

Answer 2:

您正在使用的自举下拉。 你需要的是引导选择。

<div class="form-group">
  <select class="form-control" id="xyz">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

Answer 3:

你好哥哥萨米尔bhosle提到如何使用选择，但我的问题是，你想要把未上引导工作，而我试图财产以后这可能会帮助你检查这个小提琴的选项是什么样的CSS的小提琴

    <select type="button" class="btn btn-default">
       <option class="text-success">1</option>
       <option class="text-danger">2</option>
       <option class="text-primary">3</option>
       <option>4</option>
       <option>5</option>
       <option>6</option>
       <option>7</option>
     </select><br>

这是我做了什么和它工作正常

文章来源: Bootstrap dropdown cut off behined scrollable container