Bootstrap dropdown menu within a responsive table

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.

enter image description here

<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><a href="#">Edit</a></li>
                        <!-- <li class="divider"></li> -->
                        <li><a href="#">Send Invoice</a></li>
                        <li><a href="#">Send Reminder</a></li>
                      </ul>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
</div>

Any Ideas?

I answered to that in an other post: [View my answer here](http://stackoverflow.com/questions/26018756/bootstrap-button-drop-down-inside-responsive-table-not-visible-because-of-scroll#34211851) — BaltazarQc, Dec 10 '15 at 21:18
@BaltazarQc Your solution doesn't work if you also want a vertical scrollbar on the responsive table by setting overflow-y: auto. — ImTalkingCode, May 04 '17 at 05:12

score 2 · Answer 1 · answered Nov 22 '14 at 19:43

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.

Bootstrap dropdown menu within a responsive table

1 Answers1

Linked