This is a challenge I'm facing:
https://i.sstatic.net/d3PtN.png
I'm attempting to align it in the following way:
https://i.sstatic.net/GCwEO.png
Below is the HTML code snippet:
<li class='list-group-item'>
<!-- The dropdown toggle button for the edit / delete options -->
<div class="btn-group editdeletetoogle">
<button type="button" class="btn btn-default-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Edit</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</li>
Here's the corresponding CSS:
.editdeletetoogle .dropdown-toggle
{
width: 20px;
height: 20px;
margin:0;
padding:0;
top:-30px;
right:-30px;
z-index: 10;
color: black;
background-color: transparent;
}/* '' delimiter */
.editdeletetoogle .dropdown-item
{
font-size: 15x;
padding:0px 0px 0px 10px;
width: 5px;
}
.editdeletetoogle .dropdown-menu
{
margin-top: -25px;
width: 5px;
}
I've tried using `display: block`, but the dropdown menu displays permanently instead of on button click.
Initially, I attempted this:
.editdeletetoogle .dropdown-menu
{
margin-top: -5px;
width: 5px;
position: relative;
right: 20px;
}
However, it resulted in the dropdown menu behaving incorrectly.
On trying the following:
.editdeletetoogle .dropdown-item
{
font-size: 15x;
padding:0px 0px 0px 10px;
width: 5px;
position: relative;
right: 20px;
}
The outcome was not as intended.
But after making the necessary adjustments, the issue got resolved:
<div class="dropdown-menu pull-right">
<a class="dropdown-item" href="#">Edit</a><div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Delete</a>
</div>
.editdeletetoogle .dropdown-menu
{
margin-top: -25px;
right: -30px;
width: 60px !important;
max-width: 60px;
min-width: 60px;
border-radius: 0px;
}