简单的 css 唯一解决方案

Question

当响应和滚动活动时，表格中的下拉按钮出现问题，因为由于overflow: auto;属性而导致下拉列表不可见。我如何修复它以便在折叠时显示按钮的下拉选项？我可以使用一些jQuery，但在我左右滚动问题后，我决定找到另一个解决方案。我附上照片以便更好地理解。 enter image description here

Here is a small js fiddle:

Answer 1

我解决了这个问题，我把答案放在了范围内，以帮助其他有相同问题的用户：我们在bootstrap中有一个事件，我们可以使用该事件设置overflow: inherited但如果你不这样做，这将有效你的父容器上有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" );
})

<强> and this is the fiddle

info:在这个小提琴中，作品很奇怪，我不知道为什么，但在我的项目中工作得很好。

Answer 2

仅限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

Answer 3

我采取了不同的方法，我从父母那里分离了元素，并通过jQuery将其设置为绝对位置

工作JS fidle： 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');
    }
});

Answer 4

这个解决方案对我很有用：

@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

Answer 5

我有一个仅使用CSS的解决方案，只需使用位置相对于表内的下拉列表 - 响应：

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

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

Answer 6

我的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-responsive'中的下拉菜单时，它会计算表格的高度并展开它（使用填充）以匹配显示菜单所需的高度。菜单可以是任何尺寸。

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

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

所以脚本中的$ table var实际上是一个div！（只是为了清楚......或者不是）:)）

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

Answer 7

作为参考，是2018年，我使用的是BS4.1

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

Answer 8

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

但是对于较早的版本（v4.0和更低版本），我发现此javascript snippet可以完美运行。它适用于小型表和滚动表：

$('.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': ''});
});

Answer 9

稍微清理@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');
});

Answer 10

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

我的方法略有不同。

我在另一个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>

Answer 11

尝试一次。在网上研究 1 小时后，我找到了此问题的最佳解决方案。

解决方案：-只需添加脚本

(function () {
    // hold onto the drop down menu                                             
    var dropdownMenu;

    // and when you show it, move it to the body                                     
    $(window).on('show.bs.dropdown', function (e) {

    // grab the menu        
    dropdownMenu = $(e.target).find('.dropdown-menu');

    // detach it and append it to the body
    $('body').append(dropdownMenu.detach());

    // grab the new offset position
    var eOffset = $(e.target).offset();

    // make sure to place it where it would normally go (this could be improved)
    dropdownMenu.css({
        'display': 'block',
            'top': eOffset.top + $(e.target).outerHeight(),
            'left': eOffset.left
       });
    });

    // and when you hide it, reattach the drop down, and hide it normally                                                   
    $(window).on('hide.bs.dropdown', function (e) {
        $(e.target).append(dropdownMenu.detach());
        dropdownMenu.hide();
    });
})();

输出：-

Answer 12

定义此属性。祝你好运！

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

Answer 13

只需使用

.table-responsive {
    overflow: inherit;
}

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

Answer 14

我做了一些研究，所有的答案都没有为我解决问题，但它们确实为我指明了正确的方向。

边界已设置为“窗口”。

我的 <tbody> 有一个 position: relative;。下拉菜单有一个 position: absolute;，但与导致问题的 tbody 保持“相对”。

我将 <tbody> 更改为 position: static;，这在没有任何 JavaScript 的情况下解决了我的问题，并且表格仍然响应。

顺便说一下，我正在使用 Bootstrap 4。

Answer 15

我的解决方案是这样的：

.table-responsive {
    min-height: 300px;
}

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

Answer 16

简单的 css 唯一解决方案

而不是修改父表，这里我有一个简单的解决方案

这个想法是将 z-index 添加到保存下拉列表的 <td></td> 中。以便它位于所有其他元素之上。

<td style="position: absolute; z-index: 10; width: 20%;"></td>

Answer 17

另一个解决方案是

.table-responsive{
  min-height: 400px;
}

Answer 18

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

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

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

尝试这样做。

Answer 19

只要人们仍然停留在这个问题上，我们就已经在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;
}

Answer 20

Burebistaruler在ios8（iphone4s）上的响应对我来说还不错，但是在开始工作之前不要忘记安卓。我在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" );
})

Answer 21

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

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

Answer 22

基于接受的答案和@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 */
    }
}

在大屏幕上，下拉列表不会隐藏在reponsive-table后面，在小屏幕中它将被隐藏但是没关系，因为无论如何移动中都有滚动条。

希望这有助于某人。

Answer 23

我们在此处解决了这个问题，方法是在下拉列表靠近表格底部时将.dropup类应用于下拉列表。enter image description here

Answer 24

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

                    <xsl:if test="core/clientMain/coverage">
                        <xsl:apply-templates select="core/clientMain/coverage"/>
                    </xsl:if>
                    <xsl:if test="not(core/clientMain/coverage)">
                      <fo:table-row>
                        <fo:table-cell><fo:block white-space-treatment="preserve"><fo:leader /></fo:block></fo:table-cell>
                        <fo:table-cell><fo:block white-space-treatment="preserve"><fo:leader /></fo:block></fo:table-cell>
                        <fo:table-cell><fo:block white-space-treatment="preserve"><fo:leader /></fo:block></fo:table-cell>
                        <fo:table-cell><fo:block white-space-treatment="preserve"><fo:leader /></fo:block></fo:table-cell>
                        <fo:table-cell><fo:block white-space-treatment="preserve"><fo:leader /></fo:block></fo:table-cell>
                      </fo:table-row>
                    </xsl:if>

和HTML

$(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");
    })
})

在：

显示下拉列表后： {{3}}

Answer 25

就我而言，这很好：

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

Answer 26

在bootstrap.css中搜索下一个代码：

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

...并用此更新：

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

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

26 个答案:

简单的 css 唯一解决方案