Bootstrap dropdown menu within a responsive table - html

Question

Im having an issue with a dropdown menu within a responsive table in Bootstrap 3. No matter what I place in the CSS (like overflow: auto or positioning) the menu in the dropdown appears within the responsive div and in order to click on any of the links you would have to scroll.
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr class="table_desc">
<th></th>
<th><input type="checkbox"></th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="table_items">
<td><div class="item_strip"></div></td>
<th><input type="checkbox"></th>
<td>Deposit Paid</td>
<td>
<!-- Split button -->
<div class="btn-group action-button">
<button type="button" class="btn btn-xs btn-danger">View</button>
<button type="button" class="btn btn-danger btn-xs dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Edit</li>
<!-- <li class="divider"></li> -->
<li>Send Invoice</li>
<li>Send Reminder</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Any Ideas?

Answer 1

after debugging in bootstrap.css on line 2247
#media screen and (max-width: 767px) {
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
If you comment both overflows it works properly.It doesn't work properly below width 767 because of the overflow properties if you simply overwrite those in your css it will work.