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

当表格中的下拉按钮响应并滚动激活时，我遇到问题，因为由于

溢出：auto，下拉按钮不可见属性。我如何解决这个问题，以便在按钮折叠时显示按钮的下拉选项？我可以使用一些jQuery，但在我遇到左右滚动的问题后，我决定寻找另一个解决方案。
为了更好地理解，我附上了一张照片

唯一的CSS解决方案是允许y轴溢出


编辑

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

@media (max-width: 767px) {
    .table-responsive .dropdown-menu {
        position: static !important;
    }
}
@media (min-width: 768px) {
    .table-responsive {
        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" );
})


信息：
在这个提琴示例中工作起来很奇怪，我不知道为什么，但在我的项目中工作得很好。
BureBiStarler响应在ios8（iphone4s）上对我来说很好，但在android上没有以前工作过的效果。
donne在ios8（iphone4s）和Androir上为我工作的是：

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

我有一个只使用CSS的解决方案，只需在表中的下拉列表中使用相对位置：

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

我的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变量实际上是一个div！（我只是想澄清一下……或不是）：）

注意：我将它包装在一个函数中，这样我的IDE就可以折叠函数；）但这不是强制性的
 在bootstrap.css中搜索下一个代码：

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

…并更新为：

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

这个解决方案对我来说非常有效：

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

更多详细信息：
根据公认的答案和@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 */
    }
}

在大屏幕上，下拉列表不会隐藏在Responsive表后面，而在小屏幕上，下拉列表会隐藏，但这没关系，因为移动设备中有滚动条

希望这对其他人有所帮助。
我采用了不同的方法，我将元素从父元素中分离出来，并通过jQuery将其设置为绝对位置

工作提琴：


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

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

我的方法略有不同

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

然后在桌面上，我添加了最小高度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%



价值1
价值2
价值3
价值4
资料







资料







资料







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

.table-responsive {
    overflow: inherit;
}

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

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

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

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

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

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

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

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

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

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

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

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