If I add a dropdown box with this code:
<li class="nav-item dropdown ml-auto show">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="true">
Options<span class="caret"></span>
</a>
<div class="dropdown-menu show" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(-5px, 44px, 0px);">
<a class="dropdown-item" tabindex="-1" href="#"><i class="fas fa-dollar-sign" aria-hidden="true"></i> Subscriptions</a>
<a class="dropdown-item" tabindex="-1" href="#">Revoke PT Profile</a>
<a class="dropdown-item" tabindex="-1" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" tabindex="-1" href="#"><i class="fas fa-trash" aria-hidden="true"></i> Delete User</a>
</div>
</li>
It will not have the right position and add a srollbar at the bottom, like showing on the picture below.
Screenshots
https://imgur.com/XUlkanD
Environment (please complete the following information):
You need to add .dropdown-menu-right to .dropdown-menu. This will fix your problem.
Most helpful comment
You need to add
.dropdown-menu-rightto.dropdown-menu. This will fix your problem.