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

Question

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

这是一个小小的小提琴:

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

这就是小提琴

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

Bootstrap 5 解决方案

这对我来说最有效：

.table-responsive .dropdown,
.table-responsive .btn-group,
.table-responsive .btn-group-vertical {
    position: static;
}

Answer 4

我采取了一种不同的方法,我已经从父级分离了元素,并通过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 5

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

@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 6

作为参考,它是2018年,我正在使用BS4.1

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

Answer 7

定义此属性。祝你好运！

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

Answer 8

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

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

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

Answer 9

我的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'类的表,它是一个包装div:

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

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

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

Answer 10

这已通过添加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': ''});
});

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

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