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

Bootstrap button drop-down inside responsive table not visible because of scroll

提问by BurebistaRuler

I have a problem with drop-down buttons inside tables when are responsive and scroll active because the drop-down is not visible because of overflow: auto;property. How can I fix that in order to show drop-down option of button when this is collapsed? I can use some jQuery but after I have problems with scroll left-right so I decided to find another solution. I have attached a photo to understand better.

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

Here is a small js fiddle:

这是一个小的js小提琴：

采纳答案by BurebistaRuler

I solved myself this and I put the answer in scope to help other user that have same problem : We have an event in bootstrap and we can use that event to set overflow: inheritedbut this will work if you don't have css property on your parent container.

我自己解决了这个问题，并将答案放在范围内以帮助其他有相同问题的用户：我们在引导程序中有一个事件，我们可以使用该事件进行设置，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:In this fiddle example works strange and I'm not sure why but in my project works just fine.

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

回答by Zim

A CSS onlysolution is to allow the y-axis to overflow.

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

http://www.bootply.com/YvePJTDzI0

http://www.bootply.com/YvePJTDzI0

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

EDIT

编辑

Another CSS only solution is to responsively apply the overflow based on viewport width:

另一个仅 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

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

回答by Ben

For reference, it's 2018 and I'm using BS4.1

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

Try adding data-boundary="viewport"to the button that toggles the dropdown (the one with the class dropdown-toggle). See https://getbootstrap.com/docs/4.1/components/dropdowns/#options

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

回答by Wazime

I'd took a different approach, I had detached the element from the parent and set it with position absolute by jQuery

我采取了不同的方法，我已经将元素与父元素分离，并通过 jQuery 将其设置为绝对位置

Working JS fidle: http://jsfiddle.net/s270Lyrd/

工作 JS 小提琴：http: //jsfiddle.net/s270Lyrd/

The JS solution I am using.

我正在使用的 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');
    }
});

回答by pham cuong

This solution worked great for me :

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

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

More detail: https://github.com/twbs/bootstrap/issues/15374

更多细节：https: //github.com/twbs/bootstrap/issues/15374

回答by Leo Caseiro

I have a solution using only CSS, just use position relative for dropdowns inside the table-responsive:

我有一个仅使用 CSS 的解决方案，只需在表格响应中的下拉菜单中使用相对位置：

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

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

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

回答by BaltazarQc

my 2￠ quick global fix:

我的 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);
  })
})();

Explications: When a dropdown-menu inside a '.table-responsive' is shown, it calculate the height of the table and expand it (with padding) to match the height required to display the menu. The menu can be any size.

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

In my case, this is not the table that has the '.table-responsive' class, it's a wrapping div:

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

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

So the $table var in the script is actually a div! (just to be clear... or not) :)

所以脚本中的 $table var 实际上是一个 div！（只是要清楚......与否）:)

Note: I wrap it in a function so my IDE can collapse function ;) but it's not mandatory!

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

回答by Halit Ye?il

Define this properties. Good Luck!

定义此属性。祝你好运！

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

回答by quakes

Cleaned up @Wazime solution a little. Works great as a general solution.

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

回答by Bruce

The recommended and chosen solution, is not always the best solution. Unfortunately its the solution linkedin recently used and it creates multiple scrollbars on the page based on the situation.

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

My method was slightly different.

我的方法略有不同。

I contained the table-responsive div in another div. Then I applied height 100%, width:100%, display block and position absolute so the height and width is based on the page size, and set overflow to hidden.

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

Then on the table responsive div I added a min-height of 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%;">

As you can see in the working example below, no added scroll bars, no funny behavior, and practically as its using percentages - it should work regardless of screen size. I have not testing this for that however. If that fails for some reason, one can replace 100% with 100vh and 100vw respectively.

正如您在下面的工作示例中所看到的，没有添加滚动条，没有有趣的行为，实际上就像它的使用百分比一样 - 无论屏幕大小如何，它都应该工作。然而，我还没有对此进行测试。如果由于某种原因失败，可以分别用 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>