Dropdown adds styling that stops the right alignment working when dynamically set.

[gary-holland]

I have encountered an issue when dynamically setting the dropdown-menu-right attribute on a dropdown. When I click on the drop down, on the first click some styling is getting added that forces a left align, on the second click it works.

Sample code:

<div class="btn-group" dropdown placement="bottom right">
    <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
      This dropdown's menu is right-aligned <span class="caret"></span>
    </button>
    <ul *dropdownMenu class="dropdown-menu" [ngClass]="{'dropdown-menu-right': true}" role="menu">
      <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
      <li class="divider dropdown-divider"></li>
      <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
</div> 

when the dropdown is clicked for the first time, the following styling is getting added to the 'ul' element:

<ul class="dropdown-menu show dropdown-menu-right" 
role="menu" ng-reflect-klass="dropdown-menu" 
ng-reflect-ng-class="[object Object]" 
style="left: 0px; right: auto; top: 100%; transform: translateY(0px);">

Sample plunker is here: https://plnkr.co/edit/5OrrQx0uefrWxWBliJDL?p=preview

Versions: ngx-boostrap - 2.0.3 bootstrap 4.1 angular: 5

Note: For anyone who stumbles across this, I have been able to work around the issue by modifying the bootstrap style as follows (thanks to stackoverflow issue:

.dropdown-menu-right {
    right: 0 !important;
    left: auto !important; 
}

[steveast]

+1

[deepender87]

I am facing the same issue. Applying the class dynamically not working and it works for the second time

[dmrickey]

Seeing the same thing with 11.0.2 in 2023