Bootstrap-select: Dropdown List display behind the bootstrap table-responsive element

[M1chae1]

Environment
bootstrap 3.3.2
jQuery 2.1.3
bootstrap-select 1.6.4

Expected Result

Problem Result

Sample URL
http://jsfiddle.net/micwallo/fn2xs923/

Code

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr><th>Text</th>
                <th>DropDown</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Hello!</td>
                <td><select name="CurrencyISOCode" id="CurrencyISOCode" class="selectpicker">
                    <option value="HKD">CAD</option>
                    <option value="HKD">TWN</option>
                    <option value="HKD">RMB</option>
                    <option value="USD">USD</option>
                    <option value="HKD">HKD</option>
                    </select>

                </td>
            </tr>
        </tbody>
    </table>
</div>

[gdanen]

I have similar behaviour, but I don't use table-responsive. I can't pinpoint what class is doing it (if it is class related at all).

[caseyjhol]

This appears to be working fine for me in Chrome, Firefox, and IE11. If you can't find a workaround, I recommend setting data-container or overflow: visible; on its parent. If you can provide me with another example and some more information I'll reopen this.

[gdanen]

_data-container=__"body"_ on the select did the trick. The overflow:visible
was not required.

Thank you for your help!

Gerry

On 8 May 2015 at 10:03, caseyjhol [email protected] wrote:

This appears to be working fine for me in Chrome, Firefox, and IE11. If
you can't find a workaround, I recommend setting data-container or overflow:
visible; on its parent. If you can provide me with another example and
some more information I'll reopen this.

Reply to this email directly or view it on GitHub
https://github.com/silviomoreto/bootstrap-select/issues/972#issuecomment-100281335
.