使下拉菜單在引導響應表中可見

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作為下拉菜單的高度。