I am using Angular Bootstrap in my project for styling. When I am using ngbDropdown, the Dropdownlist is always shown below the actual dropdown item:
This is the HTML I am using:
<div ngbDropdown class="d-block" id="tedder-select">
<button class="btn btn-primary w-100" id="dropdown-tedder" (click)="scrollToTedder()"
ngbDropdownToggle>{{selectedTedder}}</button>
<div ngbDropdownMenu aria-labelledby="dropdown-tedder">
<button ngbDropdownItem *ngFor="let tedder of tedders"
(click)="selectTedder(tedder)">{{tedder}}</button>
</div>
</div>
In index.html I am adding the following scripts/css:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
My Dependencies in package.json:
"dependencies": {
"@angular/animations": "~10.1.3",
"@angular/cdk": "^10.2.7",
"@angular/common": "~10.1.3",
"@angular/compiler": "~10.1.3",
"@angular/core": "~10.1.3",
"@angular/forms": "~10.1.3",
"@angular/localize": "~10.1.3",
"@angular/material": "^10.2.7",
"@angular/platform-browser": "~10.1.3",
"@angular/platform-browser-dynamic": "~10.1.3",
"@angular/platform-server": "~10.1.3",
"@angular/router": "~10.1.3",
"@ng-bootstrap/ng-bootstrap": "^8.0.0",
"@nguniversal/express-engine": "^10.1.0",
"angular-in-memory-web-api": "~0.11.0",
"bootstrap": "^4.5.0",
"express": "^4.15.2",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.1100.2",
"@angular/cli": "~10.1.3",
"@angular/compiler-cli": "~10.1.3",
"@nguniversal/builders": "^10.1.0",
"@types/express": "^4.17.0",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-marbles": "~0.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.0.3"
}
Thank's for your help!