Using table-responsive hides the dropdown-menu - css

Question

Example here: https://jsfiddle.net/vdLk2wzk/. click in the CLICK HERE button to see the situation in action. The dropdown menu should show above everything.
<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>

Answer 1

Bootstrap applies overflow-x:hidden on .table-responsive, and once you have an overflow it will actually cut it in both direction to guarantee that the scrollbar is accessible. You could of course remove the overflow whatsoever like so:
.table-responsive {
overflow:visible !important;
}
But it will break the responsive design so with this table layout you are out of luck. On the other hand this table layout is terrible to use on mobile anyway, so I would suggest using one of the following instead: https://css-tricks.com/responsive-data-table-roundup/

Answer 2

Yes, Even i was having the same problem but using the jquery it got fixed, please have a look into the below snippet.
i have found this# http://ustutorials.com/blog/popup-overlay-not-working-in-ipad/
so based on you id change accordingly its working for me.
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’);
});
});