diff --git a/src/dropdown/dropdown.spec.ts b/src/dropdown/dropdown.spec.ts
index 88070d2f03..c83d6313c6 100644
--- a/src/dropdown/dropdown.spec.ts
+++ b/src/dropdown/dropdown.spec.ts
@@ -83,6 +83,21 @@ describe('ngb-dropdown', () => {
expect(getDropdownEl(compiled)).toHaveCssClass('dropup');
});
+ it('should have dropdown CSS class if placement is other than top', () => {
+ const html = `
+
`;
+
+ const fixture = createTestComponent(html);
+ const compiled = fixture.nativeElement;
+
+ expect(getDropdownEl(compiled)).toHaveCssClass('dropdown');
+ });
+
it('should be open initially if open expression is true', () => {
const html = `
diff --git a/src/dropdown/dropdown.ts b/src/dropdown/dropdown.ts
index 665fceaac7..f551f2e088 100644
--- a/src/dropdown/dropdown.ts
+++ b/src/dropdown/dropdown.ts
@@ -35,14 +35,16 @@ export class NgbDropdownMenu {
applyPlacement(_placement: Placement) {
// remove the current placement classes
this._renderer.removeClass(this._elementRef.nativeElement.parentElement, 'dropup');
+ this._renderer.removeClass(this._elementRef.nativeElement.parentElement, 'dropdown');
this.placement = _placement;
/**
* apply the new placement
- * change the class only in case of top to show up arrow
- * or use defualt which is dropdown to show down arrow
+ * in case of top use up-arrow or down-arrow otherwise
*/
if (_placement.search('^top') !== -1) {
this._renderer.addClass(this._elementRef.nativeElement.parentElement, 'dropup');
+ } else {
+ this._renderer.addClass(this._elementRef.nativeElement.parentElement, 'dropdown');
}
}
}