My p-table has a unique feature - the last column contains three dots that trigger a dropdown menu when clicked. The only issue is that the fixed position of the dropdown menu does not align properly with the td element in each row.
Check out the HTML code snippet below:
<td width="80" class="grp-list">
<a (click)="myFunction()">
<div class="test">
<div id="myDropdown" class="dropdown-content">
<a >Home</a>
<a >About</a>
<a >Contact</a>
</div>
</div>
Here's a glimpse at the CSS file as well:
.test:after {
content: '\2807';
font-size: 20px;
}
.grp-list .dropdown-content {
display: none;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.grp-list .dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
font-family: SFR;
}
.show {
display: block;
position: absolute;
margin-left: 10px;
margin-top: 10px;
}
Lastly, here's a quick look at the ts file functionality:
myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}