Having difficulties aligning the dropdown menu in my Angular app.
Attached is a screenshot showing the issue. The menu currently extends too far to the right of the screen, and I need it to align to the "top right" of the ellipses instead of the "top left." It's functioning within a table.
Any help in adjusting the menu to shift to the left side would be highly appreciated.
https://i.sstatic.net/mbP0F.png
HTML/CSS code snippet:
<td class="dropup">
<div class="dropup">
<button style="background-color: white;" class="dropbtn">
<img class="icon" src="assets/ellipsis.png">
</button>
<div class="dropup-content">
<a href="#">Admin Functionality</a>
<a href="#" (click)="downloadBucket(j._id)"> Download Project Snapshot</a>
<a [routerLink]="['/project/'+j._id+'/project-activity']">View Project Activity</a>
<a href="#">Archive Project</a>
<a *ngIf="j.creatorid != user._id" (click)="onLeaveProjectClick(j._id, j.projectname, n)">Leave Project</a>
</div>
</div>
</td>
.dropbtn {
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropup {
position: relative;
display: inline-block;
float:right;
}
.dropup-content {
display: none;
position: absolute;
transform-origin: 60% 40%;
top: 20px;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 10px;
}
.dropup-content :hover {
border-radius: 10px;
}
.dropup-content a {
color: black;
padding: 8px 16px;
text-decoration: none;
display: block;
}
.dropup-content a:hover {
background-color: #ddd;
color: #00aca8 !important;
}
.dropup:hover .dropup-content {
display: block;
border-radius: 10px;
}