In my current navbar structure, the {{ current_user.username }} is utilized from the templating system. Here is a snippet of the code:
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<!-- navbar items -->
</ul>
<div class="dropdown show">
<a class="dropdown-toggle" style="color: inherit" href="#" id="dropdownLink" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-user" aria-hidden="true"></i>
{{ current_user.username }}
</a>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownLink">
<li><a class="dropdown-item" href="#">Profile</a></li>
<!-- etc -->
</ul>
</div>
The issue I'm facing is that although the dropdown section is aligned to the right of the screen, when clicked it expands beyond the screen on the right side, despite using the dropdown-menu-right class which should prevent this. Any suggestions or solutions?
For reference, you can view a minimal example on Codepen here: https://codepen.io/Majora320/pen/jGwNrE