在引导响应表中显示下拉菜单

Question

我有一个bootstrap3响应表，其中包含每行中的下拉选择（使用无序列表元素）。点击下拉菜单后，用户将被迫滚动查看所有选项，而在较小的屏幕上，我甚至无法滚动显示。

我试图使它可以出现在表格顶部而不是在/之后（这将强制垂直滚动）。我试过改变了li,ul的z-index和overflow-y属性，并在CSS中包含div元素，但它没有什么区别。

相似，所以问题还没有收到一个公认的/工作答案之一：

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

"Bootstrap dropdown menu within a responsive table"

"Responsive table issues in bootstrap"

我怎样才能使列表中出现浮在顶部/外响应表？这甚至有可能吗？

的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

在GitHub问题讨论中找到解决方案here。

感谢@baltazarqc，@llins和@ simon21587。

这仍然不是我所希望的，但它至少使下拉功能。

将pull-right类添加到我的ul.drop-down元素中。然后使用他们的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': '' 
    }); 
    }); 
}); 

工作小提琴here。

Answer 2

我也有这个问题。几乎每一个我发现的修复都会破坏别的东西。最后，我最终把它变成了一个dropup按钮。它很好，直到下拉列表变得太大，然后它再次隐藏，所以我只是把一个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 3

该类table-responsive是在类table与div分开的地方。

<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>