CODEWITHSUNDEEP
angularngx-bootstrap
Allenduncare
Allenduncare

Reputation: 1

Bootstrap Dropdown shifts to bottom left

<div class="list-nav"><span>Application</span>
<span style="color:#a6a6a6">></span>
<div class="btn-group" dropdown>
<button dropdownToggle type="button" class="btn">
{{SelectedCluster}} <span class="caret"></span>
</button>
<ul *dropdownMenu class="dropdown-menu" role="menu">
<li *ngFor="let cluster of Clusters"  role="menuitem"><a class="dropdown-
item" href="/#/list/{{cluster}}">{{cluster}}</a></li>
</ul>
</div>
</div>

Code snippet along with how it displays I am writing a dropdown menu using ngxbootstrap and angular. The dropdown button is located next to the ">". I expected the menu to pop out right under the button. However it shifts and pops up under the Application span. What am I doing wrong?

Upvotes: 0

Views: 1286

Answers (1)

valorkin
valorkin

Reputation: 1339

small chance that list-nav is breaking dropdown positioning, try to append it to body https://valor-software.com/ngx-bootstrap/#/dropdowns#container-body

if it helps, try to reproduce your dropdown only with html and css, if issue persists please report it to bootstrap css github repo

Upvotes: 1

Related Questions