Dropdown inside responsive table row clipped even with data-bs-boundary set

A dropdown inside a responsive table row gets clipped even with data-bs-boundary set

Removing the table-responsive class from the parent div solves the issue, but we lose responsiveness.

Another workaround is to add style=“position:static” to the dropdown class div, and it doesn’t clip after.

Not sure if that’s expected or should be considered an issue.

OS: Ubuntu 20.04 Browser: Firefox 87 Bootstrap: bootstrap@5.0.0-beta3

Example:

<div class="table-responsive">
    <table class="table">
        <tr>
            <td>
                <div class="dropdown">
                    <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
                       data-bs-toggle="dropdown"
                       data-bs-boundary="viewport"
                       aria-expanded="false"
                    >
                        Options
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                        <li><a class="dropdown-item" href="#">Item</a></li>
                        <li><a class="dropdown-item" href="#">Item</a></li>
                        <li><a class="dropdown-item" href="#">Item</a></li>
                        <li><a class="dropdown-item" href="#">Item</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">Item</a></li>
                    </ul>
                </div>
            </td>
        </tr>
    </table>
</div>

[korki43]

I think this is expected, due to overflow-x: auto in .table-responsive. Anyways, here’s an example codepen.

[wadih]

@mrlife I just tested it in the codepen above and it still works. You can add position: static to the .dropdown div and it should not clip anymore.

Update: you can use position-static class as a shorthand