Bootstrap Dropdown is clipped inside Panel

Question

A .dropdown inside a table inside a .responsive-table inside a .panel and as you can see in the demo, the .dropdown gets clipped inside the .panel

Some sort of z-index or overflow bug inside Bootstrap I guess, how to fix it so that the dropdown shows up outside the panel when clicked?

DEMO: http://codepen.io/anon/pen/GJyave

CODE:

<div class="panel panel-default">
    <div class="panel-heading clearfix">
        <h3 class="panel-title pull-left">Panel</h3>
        <div class="pull-right">
            <button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-download-alt"></span></button>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Location</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John Smith</td>
                    <td>32</td>
                    <td>
                        <div class="dropdown">
                            <button class="btn btn-default btn-xs btn-block dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            San Francisco
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
                                <li><a href="#">San Francisco</a></li>
                                <li><a href="#">Los Angeles</a></li>
                                <li><a href="#">New York</a></li>
                                <li><a href="#">Dallas</a></li>
                                <li><a href="#">Seattle</a></li>
                                <li><a href="#">Miami</a></li>
                            </ul>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="panel-footer">
        <button class="btn btn-primary btn-sm">Add Person</button>
    </div>
</div>

Answer 1

Add following css

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

Demo

Answer 2

Just add

 .bs-example .dropdown{position:fixed}

to your CSS