使用表格响应隐藏下拉菜单

示例：https://jsfiddle.net/vdLk2wzk/。点击CLICK HERE按钮查看实际情况。下拉菜单应该显示一切。使用表格响应隐藏下拉菜单

<div class="col-md-12"> 
    <div class="panel-group" id="accordionGroups"> 
     <div class="panel panel-default"> 
      <div class="panel-heading accordion-toggle" data-toggle="collapse" data-target="#XX"> 
       <span class="panel-subtitle">TITLE</span> 
      </div> 
      <div id="XX" class="panel-collapse collapse in"> 
       <div class="panel-body"> 
        <div class="col-md-12"> 
         <div class="table-responsi"> 
          <table class="table table-condensed table-hover table-striped"> 
           <thead> 
            <tr> 
             <th>A</th> 
             <th>B</th> 
             <th>C</th> 
             <th>D</th> 
            </tr> 
           </thead> 
           <tbody> 
            <tr> 
             <td> 
              <div class="btn-group"> 
               <span class="btn btn-default btn-xs dropdown-toggle" data-hover="dropdown" data-toggle="dropdown">CLICK HERE<i class="fa fa-caret-down left-padding-low1"></i></span> 
               <ul class="dropdown-menu"> 
                <li>XXXXX</li> 
                <li>YYYYY</li> 
                <li>ZZZZZ</li> 
                <li>PPPPP</li> 
               </ul> 
              </div> 
             </td> 
             <td>BIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTEXTBIGTE</td> 
             <td>TEXT</td> 
             <td>TEXT</td> 
            </tr> 
           </tbody> 
          </table> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

来源

2015-11-23 Khrys

就这样。你想让它在溢出之外显示？ –

是的，像以上所有。谢谢。 – Khrys

对于bootstrap：下拉菜单和某些隐藏元素（如某些情况下的面板），这一直是一个持续问题 - 请参见[** this **]（https://github.com/twbs/bootstrap/issues/7160）和[**这个**]（https://github.com/twbs/bootstrap/issues/12683）。尝试了多个建议解决方案，但没有运气。 – davidkonrad

引导适用overflow-x:hidden上.table-responsive，一旦你有一个溢出它实际上将削减它在这两个方向，以保证滚动条可以访问。你当然可以删除这样的溢出：

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

但它会打破响应式设计，所以这个表格布局你运气不好。另一方面，这个表格布局在移动设备上使用太糟糕了，所以我建议使用下面的代码：https://css-tricks.com/responsive-data-table-roundup/

来源

2015-11-23 15:58:27

你完全改变了表格布局 - 从表格内的滚动条你现在有一个巨大的“宽度”的“身体”。顺便说一句，'！重要的'是没有必要的。 – davidkonrad

这就是我上面所说的“......它会打破响应式设计......”！ –

刚刚测试过。它确实通过下拉菜单解决了问题，但使表格失效。谢谢你的时间。我仍在寻找解决方案。 – Khrys

是的，即使我有同样的问题，但使用jquery它已修复，请有看看下面的代码片段。

我有那么根据你的ID变化因此其工作对我发现这个@http://ustutorials.com/blog/popup-overlay-not-working-in-ipad/

。

jquery mouse enter and mouse leave, you can try like this, for me its working fine 
//Function to display/hide scroll on mouseenter/mouseleave 
$(‘.slds-button–icon-border-filled’).each(function() { 
$(this).on(‘mouseenter’,function() { 

$(this).find(‘.slds-scrollable–x’).css(‘overflow-x’, ‘visible’); 
$(this).find(‘.slds-scrollable–x’).css(‘overflow-y’, ‘visible’); 
//alert(“hello-mousenter”); 
}); 
$(this).on(‘mouseleave’,function() { 
// alert(“hello”); 
$(this).find(‘.slds-scrollable–x’).css(‘overflow-x’, ‘auto’); 
$(this).find(‘.slds-scrollable–x’).css(‘overflow-y’, ‘hidden’); 
}); 
});

来源

2016-02-03 13:49:44

我收到了http://ustutorials.com/blog/popup-overlay-not-working-in-ipad/的评论部分 –

使用表格响应隐藏下拉菜单

回答

相关问题