'Bootstrap dropdown problem with sticky position

I am trying to create a data table that has a sticky column. In this column, I also like to create a bootstrap dropdown button. But bootstrap dropdown has a conflict with the sticky position. The Dropdown menu always opens behind the sticky column. When the dropdown opens the top end position, it looks completely fine, but when it open with the bottom end position, the problem then begins.

codepen

td,th{
  white-space: nowrap;
}
table{
  position: relative;
  overflow-y: scroll;
 }
 tr th{
    padding: 20px;
    border: 1px solid red;
}
th:last-child{
  position: sticky;
  right: 0;
  top: auto;
  color: red;
  background: black;
}
td{
  padding: 20px;
  border: 1px solid red;
}

td:last-child{
    position:sticky;
    right: 0;
    top: auto;
    color: red;
    background:cyan;
}
.dropdown.dropdown-menu{
  z-index: 9999;
}
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css" type="text/css">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
  <table cellspacing="0" cellpadding="0">
  <tr>
    <th>Menu 1</th>
    <th>Menu 2</th> 
    <th>Menu 3</th>
    <th>Menu 4</th>
  </tr>
    
  <tr>
    <td>Hello 1</td>
    <td>Hello 1</td>
    <td>Hello 1</td>
    <td>Hello 1</td>
  </tr>
  
  <tr>
    <td>Hello 1</td>
    <td>Hello 1</td>
    <td>Hello 1</td>
    <td>Hello 1</td>
  </tr>
  
  <tr>
    <td>Hello 1</td>
    <td>Hello 1</td>
    <td>Hello 1</td>
    <td>Hello 1</td>
  </tr>
  
  <tr>
    <td>Hello 1</td>
    <td>Hello 1</td>
    <td>Hello 1</td>
    <td>
      <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </button>
  <ul class="dropdown-menu" 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>
  
  <tr>
    <td>Hello 1</td>
    <td>Hello 1</td>
    <td>Hello 1</td>
    <td>Hello 1</td>
  </tr>
  
  <tr>
    <td>Hello 1</td>
    <td>Hello 1</td>
    <td>Hello 1</td>
    <td>Hello 1</td>
  </tr>
  
  <tr>
    <td>Hello 1</td>
    <td>Hello 1</td>
    <td>Hello 1</td>
    <td>Hello 1</td>
  </tr>
  
  <tr>
    <td>Hello 1</td>
    <td>Hello 1</td>
    <td>Hello 1</td>
    <td>Hello 1</td>
  </tr>
  
  <tr>
    <td>Hello 1</td>
    <td>Hello 1</td>
    <td>Hello 1</td>
    <td>Hello 1</td>
  </tr>
  
  <tr>
    <td>Hello 1</td>
    <td>Hello 1</td>
    <td>Hello 1</td>
    <td>Hello 1</td>
  </tr>
</table>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
htmlcssstickybootstrap-5


Solution 1:[1]

I'm currently having the same problem I figured it out because the dropdown inherit sticky attribute from td class, which make it stick to td position and then get overlapped

I solved mine by creating a child row to show the dropdown like this https://datatables.net/examples/api/row_details.html

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 Azi

Related Questions