Bootstrap dropdown切断了可滚动的容器 [英] Bootstrap dropdown cut off behined scrollable container

问题描述

我正在面对Bootstrap下降问题。我的下拉菜单位于带有修正高度的可滚动 div 内。

当我点击下拉菜单时，菜单出现在滚动内容的后面。虽然正常选择完美无缺。

，它演示了我面临的问题。

我试着通过应用 position：fixed 到 .dropdown-menu class，但这也不起作用。

有没有使用JQuery的解决方法？

解决方案

由于下拉菜单包含CSS position：absolute 在CSS 位置：相对的容器下。
因此，使用 z-index 。

很难（但可能）解决方案。但是，解决方案将会是使用 position：fixed ，并正确计算其父母的顶部偏移量值，可方便地使用

pre $ $ $ $''。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>默认值< / option> 
< option> 1< / option> 
< option> 2< / option> 
< / select> 
  

检查这个例子

I am facing an Issue with Bootstrap Drop Down. My dropdown is inside a scrollable div with fix height.

When I click on the dropdown, menu appears behind the scroll content. While normal select works perfectly fine.

Here is the Fiddle which demonstrates the issue I am facing.

I tried by applying position: fixed to .dropdown-menu class but that is also not working.

Is there any work around without using JQuery ?

解决方案

As the drop-down has CSS position: absolute and it is under a container which has CSS position: relative. Thus solution is difficult(but possible) using z-index.

However, solution would be easy using position: fixed with proper calculations of its parent's top offset value.

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

Check out modified JSFiddle.

Soution 2- (If you can edit HTML of source)

Easiest would be to modify the source HTML like below

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

Check this example

这篇关于Bootstrap dropdown切断了可滚动的容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！