由于滚动，响应表内的引导按钮下拉不可见

当响应和滚动活动时，表内的下拉按钮存在问题，因为由于overflow: auto;属性而无法看到下拉菜单。如何解决此问题，以便在折叠按钮时显示按钮的下拉选项？我可以使用一些jQuery，但是在左右滚动时遇到问题后，我决定寻找其他解决方案。我附了一张照片，以更好地理解。

这是一个小js小提琴：

我自己解决了这个问题，并在范围内回答了问题，以帮助遇到相同问题的其他用户：我们在引导程序中有一个事件，可以使用该事件进行设置，overflow: inherit但是如果您的父级上没有css属性，这将起作用容器。

$('.table-responsive').on('show.bs.dropdown', function () {
     $('.table-responsive').css( "overflow", "inherit" );
});

$('.table-responsive').on('hide.bs.dropdown', function () {
     $('.table-responsive').css( "overflow", "auto" );
})

这是小提琴

info: 在这个小提琴示例中，工作原理很奇怪，我不确定为什么，但是在我的项目中效果很好。

甲CSS唯一解决办法是允许y轴到溢出。

http://www.bootply.com/YvePJTDzI0

.table-responsive {
  overflow-y: visible !important;
}

编辑

另一个CSS唯一的解决方案是根据视口宽度响应地应用溢出：

@media (max-width: 767px) {
    .table-responsive .dropdown-menu {
        position: static !important;
    }
}
@media (min-width: 768px) {
    .table-responsive {
        overflow: inherit;
    }
}

https://www.codeply.com/go/D3XBvspns4

供参考，是2018年，我正在使用BS4.1

尝试添加data-boundary="viewport"到切换下拉菜单的按钮（带有的按钮dropdown-toggle）。参见https://getbootstrap.com/docs/4.1/components/dropdowns/#options

我采用了另一种方法，我已将元素与父元素分离，并通过jQuery将其设置为绝对位置

工作的JS技巧：http： //jsfiddle.net/s270Lyrd/

我正在使用的JS解决方案。

//fix menu overflow under the responsive table 
// hide menu on click... (This is a must because when we open a menu )
$(document).click(function (event) {
    //hide all our dropdowns
    $('.dropdown-menu[data-parent]').hide();

});
$(document).on('click', '.table-responsive [data-toggle="dropdown"]', function () {
    // if the button is inside a modal
    if ($('body').hasClass('modal-open')) {
        throw new Error("This solution is not working inside a responsive table inside a modal, you need to find out a way to calculate the modal Z-index and add it to the element")
        return true;
    }

    $buttonGroup = $(this).parent();
    if (!$buttonGroup.attr('data-attachedUl')) {
        var ts = +new Date;
        $ul = $(this).siblings('ul');
        $ul.attr('data-parent', ts);
        $buttonGroup.attr('data-attachedUl', ts);
        $(window).resize(function () {
            $ul.css('display', 'none').data('top');
        });
    } else {
        $ul = $('[data-parent=' + $buttonGroup.attr('data-attachedUl') + ']');
    }
    if (!$buttonGroup.hasClass('open')) {
        $ul.css('display', 'none');
        return;
    }
    dropDownFixPosition($(this).parent(), $ul);
    function dropDownFixPosition(button, dropdown) {
        var dropDownTop = button.offset().top + button.outerHeight();
        dropdown.css('top', dropDownTop + "px");
        dropdown.css('left', button.offset().left + "px");
        dropdown.css('position', "absolute");

        dropdown.css('width', dropdown.width());
        dropdown.css('heigt', dropdown.height());
        dropdown.css('display', 'block');
        dropdown.appendTo('body');
    }
});

这个解决方案对我来说很棒：

@media (max-width: 767px) {
    .table-responsive .dropdown-menu {
        position: static !important;
    }
}
@media (min-width: 768px) {
    .table-responsive {
        overflow: visible;
    }
}

更多详细信息：https : //github.com/twbs/bootstrap/issues/15374

我的2¢快速全球解决方案：

// drop down in responsive table

(function () {
  $('.table-responsive').on('shown.bs.dropdown', function (e) {
    var $table = $(this),
        $menu = $(e.target).find('.dropdown-menu'),
        tableOffsetHeight = $table.offset().top + $table.height(),
        menuOffsetHeight = $menu.offset().top + $menu.outerHeight(true);

    if (menuOffsetHeight > tableOffsetHeight)
      $table.css("padding-bottom", menuOffsetHeight - tableOffsetHeight);
  });

  $('.table-responsive').on('hide.bs.dropdown', function () {
    $(this).css("padding-bottom", 0);
  })
})();

说明：当显示“ .table-sensitive”内的下拉菜单时，它将计算表格的高度并对其进行扩展（带填充）以匹配显示菜单所需的高度。菜单可以是任何大小。

就我而言，这不是具有'.table-sensitive'类的表，而是一个包装div：

<div class="table-responsive" style="overflow:auto;">
    <table class="table table-hover table-bordered table-condensed server-sort">

因此，脚本中的$ table var实际上是一个div！（只是要清楚...或不是）：）

注意：我将其包装在函数中，以便我的IDE可以折叠函数;），但这不是强制性的！

我有一个只使用CSS的解决方案，只在表响应式内部使用相对位置作为下拉列表：

@media (max-width: 767px) {
  .table-responsive .dropdown-menu {
    position: relative; /* Sometimes needs !important */
  }
}

https://codepen.io/leocaseiro/full/rKxmpz/

定义此属性。祝好运！

data-toggle="dropdown" data-boundary="window"

通过添加data-boundary="viewport"（Bootstrap Dropdowns Docs）在Bootstrap v4.1及更高版本中已修复此问题

但是对于较早的版本（v4.0及更低版本），我发现此javascript代码段非常有效。它适用于小型表和滚动表：

$('.table-responsive').on('shown.bs.dropdown', function (e) {
    var t = $(this),
        m = $(e.target).find('.dropdown-menu'),
        tb = t.offset().top + t.height(),
        mb = m.offset().top + m.outerHeight(true),
        d = 20; // Space for shadow + scrollbar.
    if (t[0].scrollWidth > t.innerWidth()) {
        if (mb + d > tb) {
            t.css('padding-bottom', ((mb + d) - tb));
        }
    }
    else {
        t.css('overflow', 'visible');
    }
}).on('hidden.bs.dropdown', function () {
    $(this).css({'padding-bottom': '', 'overflow': ''});
});

稍微清理@Wazime解决方案。作为一般解决方案，效果很好。

$(document).on('shown.bs.dropdown', '.table-responsive', function (e) {
    // The .dropdown container
    var $container = $(e.target);

    // Find the actual .dropdown-menu
    var $dropdown = $container.find('.dropdown-menu');
    if ($dropdown.length) {
        // Save a reference to it, so we can find it after we've attached it to the body
        $container.data('dropdown-menu', $dropdown);
    } else {
        $dropdown = $container.data('dropdown-menu');
    }

    $dropdown.css('top', ($container.offset().top + $container.outerHeight()) + 'px');
    $dropdown.css('left', $container.offset().left + 'px');
    $dropdown.css('position', 'absolute');
    $dropdown.css('display', 'block');
    $dropdown.appendTo('body');
});

$(document).on('hide.bs.dropdown', '.table-responsive', function (e) {
    // Hide the dropdown menu bound to this button
    $(e.target).data('dropdown-menu').css('display', 'none');
});

推荐和选择的解决方案并不总是最好的解决方案。不幸的是，它最近使用的解决方案linkedin会根据情况在页面上创建多个滚动条。

我的方法略有不同。

我在另一个div中包含了表响应div。然后我应用了高度100％，宽度100％，显示块和绝对位置，因此高度和宽度基于页面大小，并将溢出设置为隐藏。

然后在表格div上添加最小高度100％

<div class="table_container" 
    style="height: 100%; width: 100%; display: block;position: absolute;overflow: hidden;">
<div class="table-responsive" style="min-height:100%;">

正如您在下面的工作示例中看到的那样，没有添加滚动条，没有有趣的行为，并且几乎没有使用它的使用百分比-无论屏幕大小如何，它都应该工作。我还没有为此进行测试。如果由于某种原因失败，则可以分别用100vh和100vw代替100％。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

            <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<div class="table_container" style="height: 100%; width: 100%; display: block;position: absolute;overflow: hidden;">
<div class="table-responsive" style="min-height:100%;">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Value1</th>
                            <th>Value2</th>
                            <th>Value3</th>
                            <th>Value4</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                DATA
                                <div class="btn-group btn-group-rounded">
                                    <button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">One</a></li>
                                        <li><a href="#">Two</a></li>
                                        <li><a href="#">Three</a></li>
                                        <li role="seperator" class="divider"></li>
                                        <li><a href="#">Four</a></li>
                                    </ul>
                                </div>
                            </td>

                            <td>
                                DATA
                                <div class="btn-group btn-group-rounded">
                                    <button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">One</a></li>
                                        <li><a href="#">Two</a></li>
                                        <li><a href="#">Three</a></li>
                                        <li role="seperator" class="divider"></li>
                                        <li><a href="#">Four</a></li>
                                    </ul>
                                </div>
                            </td>
                            <td>
                                DATA
                                <div class="btn-group btn-group-rounded">
                                    <button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">One</a></li>
                                        <li><a href="#">Two</a></li>
                                        <li><a href="#">Three</a></li>
                                        <li role="seperator" class="divider"></li>
                                        <li><a href="#">Four</a></li>
                                    </ul>
                                </div>
                            </td>
                            <td>DATA</td>
                        </tr>
                        <tr>
                            <td>
                                DATA
                                <div class="btn-group btn-group-rounded">
                                    <button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">One</a></li>
                                        <li><a href="#">Two</a></li>
                                        <li><a href="#">Three</a></li>
                                        <li role="seperator" class="divider"></li>
                                        <li><a href="#">Four</a></li>                                    </ul>
                                </div>
                            </td>

                            <td>
                                DATA
                                <div class="btn-group btn-group-rounded">
                                    <button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">One</a></li>
                                        <li><a href="#">Two</a></li>
                                        <li><a href="#">Three</a></li>
                                        <li role="seperator" class="divider"></li>
                                        <li><a href="#">Four</a></li>
                                    </ul>
                                </div>
                            </td>
                            <td>
                                DATA
                                <div class="btn-group btn-group-rounded">
                                    <button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">One</a></li>
                                        <li><a href="#">Two</a></li>
                                        <li><a href="#">Three</a></li>
                                        <li role="seperator" class="divider"></li>
                                        <li><a href="#">Four</a></li>
                                    </ul>
                                </div>
                            </td>
                            <td>DATA</td>
                        </tr>
                    </tbody>
                </table>
            </div>
</div>

根据公认的答案和@LeoCaseiro的答案，这是我在本案例中最终使用的内容：

@media (max-width: 767px) {
    .table-responsive{
        overflow-x: auto;
        overflow-y: auto;
    }
}
@media (min-width: 767px) {
    .table-responsive{
        overflow: inherit !important; /* Sometimes needs !important */
    }
}

在大屏幕上，下拉菜单不会隐藏在响应表的后面；在小屏幕上，下拉菜单将被隐藏，但没关系，因为无论如何移动设备中都有滚动条。

希望这可以帮助某人。

Burebistaruler的响应在ios8（iphone4s）上对我来说还可以，但在之前运行的android上不起作用。我在ios8（iphone4s）和andoir上对我有用的东西是：

$('.table-responsive').on('show.bs.dropdown', function () {
 $('.table-responsive').css( "min-height", "400px" );
});

$('.table-responsive').on('hide.bs.dropdown', function () {
     $('.table-responsive').css( "min-height", "none" );
})

这对其他人可能有用。我正在使用DatatablesJS。我将500px添加到表格的当前高度。我这样做是因为数据表允许您在表中使用10、20等页面。所以我需要从数学上计算桌子的高度。
显示下拉菜单时，我增加了额外的高度。
隐藏下拉菜单后，我将重置原始表格的高度。

$(document).ready(function() {
    $('.table-responsive .dropdown').on('shown.bs.dropdown', function () {
          console.log($('#table-responsive-cliente').height() + 500)
          $("#table-responsive-cliente").css("height",$('#table-responsive-cliente').height() + 500 );
    })

    $('.table-responsive .dropdown').on('hide.bs.dropdown', function () {
           $("#table-responsive-cliente").css("height","auto");
    })
})

和HTML

<div class="table-responsive" id="table-responsive-cliente">
    <table class="table-striped table-hover">
     ....

     ....
    </table>
</div>

之前：

显示下拉菜单后：

我们在这里通过在下拉列表接近表底部时对下拉列表应用.dropup类来解决此问题。在此处输入图片说明

这在Bootstrap 4中对我有用，因为它的断点与v3不同：

@media (min-width: 992px) {
    .table-responsive {
        overflow: inherit;
    }
}

只要人们仍然停留在这个问题上，我们就已经在2020年了。通过为下拉菜单提供弹性显示，可以得到纯CSS解决方案

该代码段非常适合datatable-scroll-wrap上课

.datatable-scroll-wrap .dropdown.dropup.open .dropdown-menu {
    display: flex;
}
.datatable-scroll-wrap .dropdown.dropup.open .dropdown-menu li a {
    display: flex;
}

好吧，阅读最上面的答案时，我看到当您看到滚动条并且切换按钮在最后一列（在我的情况下）或其他看不见的列上时，它确实不起作用

但是，如果将“继承”更改为“隐藏”，它将起作用。

$('.table-responsive').on('show.bs.dropdown', function () {
    $('.table-responsive').css( "overflow", "hidden" );
}).on('hide.bs.dropdown', function () {
    $('.table-responsive').css( "overflow", "auto" );
})

尝试这样做。

在bootstrap.css内部搜索以下代码：

.fixed-table-body {
  overflow-x: auto;
  overflow-y: auto;
  height: 100%;
}

...然后更新：

.fixed-table-body {
  overflow-x: visible;
  overflow-y: visible;
  height: 100%;
}

只需使用此

.table-responsive {
    overflow: inherit;
}

它适用于Chrome，但不适用于IE10或Edge，因为不支持继承属性

就我而言，这很好：

.table-responsive {
  overflow-y: visible !important;
}