'Bootstrap dropdown partially hidden by table cells

obscured dropdown

Here is the html for creating the dropdown:

<div class="btn-group pull-right elipsis-margin open">
<button type="button" class="btn btn-link btn-action dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" data-validation-status="ok">
    <i class="fa fa-ellipsis-v fa-lg"></i>
</button>
<ul class="dropdown-menu">
    <li><a href="#shareModal" data-toggle="modal" class="btn-action"><i class="fa fa-share fa-fw"></i>Share</a></li>
    <li><a href="#"><i class="fa fa-pencil fa-fw"></i>Edit</a></li>

    <li role="separator" class="divider"></li>
    <li><a href="#unshareModal" data-toggle="modal" class="btn-action"><i class="fa fa-ban fa-fw"></i>Unshare</a></li>
</ul>

This div is located inside a inside a table body. Clearly, the drop-down is being obscured by the table cells, but its z-position is set to 1000. It seems like it should display properly.

Any help would be greatly appreciated.

htmlcsstwitter-bootstrapdrop-down-menu


Solution 1:[1]

z-index will only work on an element whose position property has been explicitly set to absolute , fixed , or relative.

Try setting your drop downs position to one of the above. You may also need to do this for the table too.

Eg:

.your-class {
  position: relative;
}

Solution 2:[2]

Bootstrap 5

make dropdown static and dropdown-menu absolute

<table class="table table-bordered ">
    <thead class="">
    <tr class="">
        <th>Name</th>
    </tr>
    </thead>
    <tbody class="">
    <tr>
        <td class="text-center">
            <div class="dropdown position-static">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1"
                        data-bs-toggle="dropdown" aria-expanded="false">
                    --
                </button>
                <ul class="dropdown-menu position-absolute" aria-labelledby="dropdownMenuButton1">
                    <li><a class="dropdown-item " href="#">Action</a></li>
                    <li><a class="dropdown-item " href="#">Another action</a></li>
                    <li><a class="dropdown-item " href="#">Something else here</a></li>
                </ul>
            </div>
        </td>
    </tr>
    </tbody>
</table>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Coffee bean
Solution 2 Aseem

Related Questions