Currently, I am working on a sizable project with extensive code, which restricts me from modifying the HTML structure of the table. However, I have the flexibility to adjust the CSS.
Many parts of the content are lengthy, and my goal is to enable horizontal scrolling for the .container if there is overflow in content.
The issue arises when changing the .container's overflow-x property to either auto or scroll, as it causes the dropdown menu triggered by the CLICK ME link to only display within the container's boundaries, clipping any content that extends beyond it. Is there a way to overcome this obstacle?
body {
background-color: pink;
}
.container {
margin-top:100px;
height: 150px;
width: 100%;
background-color:grey;
overflow-x: inherit;
max-height: 150px;
}
td {
font-size: 30px;
}
.foo {
color: red;
}
.dropdown-menu{
right:20px;
top:-30px;
position: absolute;
z-index: 2147483549;
}
tr:nth-child(1) td .dropdown-menu {
top: -30px !important;
}
tr:nth-last-child(-n+2) td .dropdown-menu{
top: -165px;
}
a.dropdown-toggle {
position: absolute;
z-index: 999;
right: 20px;
}
.open > .dropdown-toggle.btn-bitbucket {
color: #ffffff;
background-color: #163758;
border-color: rgba(0, 0, 0, 0.2);
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.bundle.js"></script>
<div class="container">
<table>
<td>
Option1
</td>
<td class="foo">
CLICK
<div class="dropdown">
<a href="#" class="dropdown-toggle" id="options" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
.....
</a>
<ul class="dropdown-menu pull-right" aria-labelledby="options">
<li><a href="/admin/orders" class="link">Associated Orders</a></li>
<li><a href="/admin/items" class="link">Associated Items</a></li>
<li><a href="/admin/colors" class="link">Associated Colors</a></li>
<li><a href="/admin/waitlist/by-customer" class="link">Associated Lists</a></li>
<li><a href="/admin/shopping-cart" class="link">Associated Carts</a></li>
<li><a href="/admin/waitlist/others" class="link">Others</a></li>
<li><a href="/admin/waitlist/account" class="link">Account</a></li>
</ul>
</div>
</td>
<td>
Option3
</td>
<td>
Option4
</td>
<td>
Option5
</td>
<td>
Option6
</td>
<td>
Option7
</td>
<td>
Option8
</td>
<td>
Optio9
</td>
<td>
Option10
</td>
<td>
Option11
</td>
<td>
Option12
</td>
<td>
Option13
</td>
<td>
Option14
</td>
</table>
</div>