I am currently working on a dropdown menu and I would like the dropdown items to be displayed on the right side. The functionality is working, but there seems to be an issue where the dropdown menu is not fully visible. The dropdown menu is located within a sidebar, and when the space in the sidebar is insufficient, it cuts off half of the dropdown items.
Here is a snippet of my code (please excuse the inline CSS):
<div class="dropright">
<button type="button" class="" style="background: none;
color: inherit;
border-top: 1px solid white;
border-bottom: 1px solid white;
border-left: 0;
border-right: 0;
padding: 10px 12px;
font: inherit;
cursor: pointer;
align-items: center;
width: 80%;
outline: inherit;"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Items
</button>
<div class="dropdown-menu" x-placement="right-start"
style="position: absolute;
transform: translate3d(111px, 0px, 0px);
top: 0px;
left: 0px;
will-change: transform;">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</div>
The issue can be seen in the images below, where half of the dropdown menu is hidden:
https://i.sstatic.net/txAxH.png
https://i.sstatic.net/V2Co8.png
Additionally, here is a snippet of my sidebar code:
<div class="main-menu menu-fixed menu-dark menu-accordion menu-shadow" data-scroll-to-active="true">
<div class="main-menu-content">
<ul class="navigation navigation-main" id="main-menu-navigation" data-menu="menu-navigation"
data-icon-style="lines" style="position: relative">
<li class=" navigation-header"><span>SUPER ADMIN</span>
</li>
<li class=" nav-item"><a href="{{ route('home') }}"><i class="menu-livicon"
data-icon="line-chart"></i><span class="menu-title" data-i18n="home"><span
class="menu-title" data-i18n="home">Dashboard</span></a>
</li>
<div class="dropright">
<button type="button" class="" style="background: none;
color: inherit;
border-top: 1px solid white;
border-bottom: 1px solid white;
border-left: 0;
border-right: 0;
padding: 10px 12px;
font: inherit;
cursor: pointer;
align-items: center;
width: 100%;
outline: inherit;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Items
</button>
<div class="dropdown-menu" x-placement="right-start" style="position: absolute; transform: translate3d(111px, 0px, 0px); top: 0px; left: 0px; will-change: transform;">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</div>
<li class=" navigation-header"><span>MENU</span>
</li>
<li class=" nav-item"><a href="{{ route('home') }}"><i class="menu-livicon"
data-icon="line-chart"></i><span class="menu-title" data-i18n="home"><span
class="menu-title" data-i18n="home">Data Master</span></a>
</li>
</ul>
</div>
</div>