当响应和滚动活动时,表格内的下拉按钮出现问题,因为overflow: auto;
属性导致下拉列表不可见.我如何修复它以便在折叠时显示按钮的下拉选项?我可以使用一些jQuery,但在我左右滚动问题后,我决定找到另一个解决方案.我附上照片以便更好地理解.
这是一个小小的小提琴:
我解决了这个问题,我把答案放在范围内,以帮助其他有相同问题的用户:我们在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:
在这个小提琴例子工作奇怪,我不知道为什么,但在我的项目工作正常.
甲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
我的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" > <table class="table table-hover table-bordered table-condensed server-sort">
所以脚本中的$ table var实际上是一个div!(只是为了清楚......或者不是):)
注意:我将它包装在一个函数中,以便我的IDE可以折叠函数;)但它不是强制性的!
我采取了一种不同的方法,我已经从父级分离了元素,并通过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'); } });
作为参考,它是2018年,我正在使用BS4.1
尝试添加data-boundary="viewport"
切换下拉列表的按钮(带有类的按钮dropdown-toggle
).请参阅https://getbootstrap.com/docs/4.1/components/dropdowns/#options
我有一个只使用CSS的解决方案,只需使用位置相对于表内的下拉列表 - 响应:
@media (max-width: 767px) { .table-responsive .dropdown-menu { position: relative; /* Sometimes needs !important */ } }
https://codepen.io/leocaseiro/full/rKxmpz/
这个解决方案对我很有用:
@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