I am currently working on creating a drop-down component in Reactjs, but I'm facing an issue with it popping up outside the browser width.
Initially, I tried setting right: 0px, which worked well when the dropdown was at the rightmost position of the panel. However, it caused alignment issues when the dropdown was positioned elsewhere.
If you'd like to view a sample, you can check out the codepen here.
Below is a snippet of the CSS styling:
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
And here's how the HTML structure looks like:
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
You may notice that there is a scrollbar present in the content.
My goal is to achieve a right-aligned dropdown content relative to the dropdown header.
Thank you!