javascript - 使下拉列表在引导响应表中可见(Make dropdown visible in bootstrap responsive table)

Question

I have a bootstrap3 responsive table that contains a dropdown selection (made with unordered list elements) in each row.

(我有一个bootstrap3响应表，该表在每行中包含一个下拉选择（由无序列表元素组成）。)

When the dropdown is clicked the user is forced to scroll to see all the options, and on smaller screens I cannot even scroll to do that.

(单击下拉菜单时，用户被迫滚动以查看所有选项，并且在较小的屏幕上，我什至无法滚动来做到这一点。)

I'm trying to make it so the options can appear on top of the table instead of under/behind (which forces the vertical scrolling).

(我正在尝试使它显示在表的顶部，而不是在下方/后面（这会强制垂直滚动）。)

I have tried altering the z-index and overflow-y properties of the li , ul and containing div elements in CSS but it isn't making a difference.

(我试过更改li ， ul的z-index和overflow-y属性，并在CSS中包含div元素，但这没有任何区别。)

Similar SO questions have not received an accepted/working answer either:

(类似的SO问题也未收到可接受的/有效的答案：)

"dropdown button get cutoff by responsive table in bootstrap 3"

(“引导按钮3中的响应表使下拉按钮中断”)

"Bootstrap dropdown menu within a responsive table"

(“响应表中的引导程序下拉菜单”)

"Responsive table issues in bootstrap"

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

How can I make the list appear to float on top/outside of the responsive table?

(如何使列表看起来浮在响应表的顶部/外部？)

Is this even possible?

(这有可能吗？)

jsfiddle:

(jsfiddle：)

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

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

html:

(的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:

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

  ask by DjH translate from so

Answer 1

I had this problem too.

(我也有这个问题。)

Pretty much every fix I found would break something else.

(我发现的每个修复程序几乎都会破坏其他功能。)

In the end, I ended up making it a dropup button.

(最后，我最终将其设置为一个下拉按钮。)

It was working great until the dropdown list became too large, then it was hiding again so I just put a javascript function to change the top margin everytime the button is pressed (so that you can see everything again).

(直到下拉列表变得太大为止，它一直很好用，然后再次隐藏了，因此，我只需要在每次按下按钮时都使用javascript函数更改顶部边距（这样您才能再次看到所有内容）。)

I had an action button for each row in my table so I had to add another statement that only changes the margin when the top button is pressed.

(我表中的每一行都有一个操作按钮，因此我不得不添加另一条语句，该语句仅在按下顶部按钮时才更改边距。)

I am not sure if you plan on having multiple action buttons but here is my fix for your initial issue:

(我不确定您是否打算设置多个操作按钮，但这是我为您解决的第一个问题：)

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

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

If you have multiple action dropdowns, just make sure only the top action dropdown has the id "queryDropdown" class.

(如果您有多个操作下拉菜单，只需确保仅顶部操作下拉菜单具有id“ queryDropdown”类。)

After that, all the rows below it will have their dropdowns drop up over the other elements in the table so it will look normal.

(在那之后，它下面的所有行的下拉菜单将拖放到表中的其他元素上，因此它将看起来很正常。)

You can probably add a css animation to make the margin change more smooth.

(您可能可以添加css动画以使边距更改更加平滑。)