Merge pull request #76 from cal-smith/master

fix(overflow-menu): fix overflow menu not positioning correctly in all cases

Author: zvonimirfras

src/dialog/overflow-menu/overflow-menu-pane.component.ts

@@ -1,5 +1,6 @@
 import { Component } from "@angular/core";
 import { Dialog } from "../dialog.component";
+import { position } from "../../utils/position";
 
 /**
  * Extend the `Dialog` component to create an overflow menu.
@@ -9,16 +10,27 @@ import { Dialog } from "../dialog.component";
 @Component({
 	selector: "ibm-overflow-menu-pane",
 	template: `
-		<div #dialog>
-			<ul
-				class="bx--overflow-menu-options bx--overflow-menu-options--open"
-				tabindex="-1">
-				<ng-template
-					[ngTemplateOutlet]="dialogConfig.content"
-					[ngTemplateOutletContext]="{overflowMenu: this}">
-				</ng-template>
-			</ul>
-		</div>
-		`
+		<ul
+			#dialog
+			class="bx--overflow-menu-options bx--overflow-menu-options--open"
+			tabindex="-1">
+			<ng-template
+				[ngTemplateOutlet]="dialogConfig.content"
+				[ngTemplateOutletContext]="{overflowMenu: this}">
+			</ng-template>
+		</ul>
+	`
 })
-export class OverflowMenuPane extends Dialog {}
+export class OverflowMenuPane extends Dialog {
+	onDialogInit() {
+		/**
+		 *  -20 shifts the menu up to compensate for the
+		 *  extra offset generated by the wrapper component.
+		 *
+		 *  60 shifts the menu right to align the arrow.
+		 * (position service trys it's best to center everything,
+		 * so we need to add some compensation)
+		 */
+		this.addGap["bottom"] = pos => position.addOffset(pos, -20, 60);
+	}
+}

src/dialog/overflow-menu/overflow-menu.component.ts

@@ -17,6 +17,8 @@ import { Component } from "@angular/core";
 	template: `
 		<div
 			[ibmOverflowMenu]="options"
+			[appendToBody]="true"
+			placement="bottom"
 			class="bx--overflow-menu"
 			style="display: block;">
 			<svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">