使下拉菜单在引导响应表中可见

Question

我有一个 bootstrap3 响应表，其中每行都包含一个下拉选择（由无序列表元素组成）。 单击下拉菜单时，用户被迫滚动以查看所有选项，而在较小的屏幕上，我什至无法滚动来执行此操作。

我正在努力使选项可以出现在表格的顶部而不是下面/后面（这会强制垂直滚动）。 我曾尝试在 CSS 中更改li 、 ul和包含div元素的z-index和overflow-y属性，但没有任何区别。

类似的 SO 问题也没有收到接受/有效的答案：

“下拉按钮被引导程序 3 中的响应表切断”

“响应式表格中的引导下拉菜单”

“引导程序中的响应表问题”

如何使列表看起来漂浮在响应表的顶部/外部？ 这甚至可能吗？

jsfiddle：

https://jsfiddle.net/vndyLy1e/3/

html：

<div class="table-responsive">
  <table class="table table-striped table-condensed" style="z-index: 1">
    <thead>
      <tr>
        <th class="col-xs-2 col-md-3">Col 1</th>
        <th class="col-xs-1 col-md-2">Col 2</th>
        <th class="col-xs-1 col-md-2">Col 3</th>
        <th class="col-xs-1 col-md-2">Col 4</th>
        <th class="col-xs-1 col-md-1">Col 5</th>
        <th class="col-xs-1 col-md-1">Col 6</th>
        <th class="col-xs-1 col-md-1"></th>
      </tr>
    </thead>
    <tbody class="table-body">

      <tr>
        <td>$Col 1 Data</td>
        <td>$Col 2 Data</td>
        <td>$Col 3 Data</td>
        <td>$Col 4 Data</td>
        <td>$Col 4 Data</td>
        <td>$Col 5 Data</td>

        <!-- Action Dropdown-->
        <td>
          <div class="btn-group">
            <button type="button" class="btn btn-default btn-transparent btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <span class="title-element-name">Actions </span><span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
              <li><a>Drop Option 1</a></li>
              <li><a>Drop Option 2</a></li>
              <li><a>Drop Option 3</a></li>
              <li><a>Drop Option 4</a></li>
            </ul>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

css：

.dropdown-menu {
  overflow-y: visible !important;
  z-index: 999;
  ul {
    overflow-y: visible !important;
  }
  li {
    overflow-y: visible !important;
  }
  li:hover {
    cursor: pointer;
    cursor: hand;
  }
}

.title-element-name {
  color: #FF8200;
  font-weight: bold;
}

.table-responsive {
  z-index: 999;
  overflow-y: auto !important;
}

Answer 1

我也有这个问题。 我发现的几乎每一个修复都会破坏其他东西。 最后，我把它变成了一个下拉按钮。 它运行良好，直到下拉列表变得太大，然后它再次隐藏，所以我只是放置了一个 javascript 函数来在每次按下按钮时更改顶部边距（以便您可以再次看到所有内容）。

我的表格中的每一行都有一个操作按钮，因此我必须添加另一个语句，该语句仅在按下顶部按钮时更改边距。 我不确定您是否打算拥有多个操作按钮，但这是我对您最初问题的解决方法：

https://jsfiddle.net/vndyLy1e/7/

$(document).on('show.bs.dropdown', function(e) {
     if ($(e.relatedTarget).hasClass('queryDropdown')) {
         $('#test').css('padding-top', '90px');
     }
});
$(document).on('hide.bs.dropdown',function (e) {
    if ($(e.relatedTarget).hasClass('queryDropdown')) {
        $('#test').css('padding-top', '25px');
    }
});

如果您有多个操作下拉列表，只需确保只有顶部操作下拉列表的 id 为“queryDropdown”类。 之后，它下面的所有行都将下拉列表中的其他元素，因此它看起来很正常。

您可能可以添加一个 css 动画，使边距变化更平滑。

Answer 2

在此处有关此问题的 GitHub 问题讨论中找到了解决方案。

感谢@baltazarqc、@llins 和@simon21587。

这仍然不是我真正希望的，但它至少使下拉菜单起作用。

向我的ul.drop-down元素添加了pull-right类。 然后使用他们的 jQuery 解决方案。

$(function() {
  $('.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 3

class table-responsive放在与 class table分开的div table 。

 <div class="table-responsive">

将它们放在一起可以解决问题。

<table class="table table-responsive table-striped table-condensed" >

 .dropdown-menu { overflow-y: visible !important; z-index: 999; left:-80px !important; } ul { overflow-y: visible !important; } li { overflow-y: visible !important; } li:hover { cursor: pointer; cursor: hand; } .title-element-name { color: #FF8200; font-weight: bold; } .table-responsive { z-index: 999; overflow-y: auto !important; } .title-element-name { color: #FF8200; font-weight: bold; } .table-responsive { z-index: 999; overflow-y: auto !important; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div > <table class="table table-responsive table-striped table-condensed" > <thead> <tr> <th class="col-xs-2 col-md-3">Col 1</th> <th class="col-xs-1 col-md-2">Col 2</th> <th class="col-xs-1 col-md-2">Col 3</th> <th class="col-xs-1 col-md-2">Col 4</th> <th class="col-xs-1 col-md-1">Col 5</th> <th class="col-xs-1 col-md-1">Col 6</th> <th class="col-xs-1 col-md-1"> </th> </thead> <tbody class="table-body"> <tr> <td>$Col 1 Data</td> <td>$Col 2 Data</td> <td>$Col 3 Data</td> <td>$Col 4 Data</td> <td>$Col 4 Data</td> <td>$Col 5 Data</td> <td> <div class="btn-group"> <button type="button" class="btn btn-default btn-transparent btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="title-element-name">Actions </span><span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a>Drop Option 1</a></li> <li><a>Drop Option 2</a></li> <li><a>Drop Option 3</a></li> <li><a>Drop Option 4</a></li> </ul> </div> </td> </tr> </tbody> </table> </div>

Answer 4

最简单的方法是将min-height设置为<div> ，它具有table-responsive作为下拉菜单的高度。