diff --git a/src/components/autocomplete/AutoComplete.d.ts b/src/components/autocomplete/AutoComplete.d.ts
index 3d91fba65..c462d3702 100644
--- a/src/components/autocomplete/AutoComplete.d.ts
+++ b/src/components/autocomplete/AutoComplete.d.ts
@@ -12,8 +12,8 @@ export declare class AutoComplete extends Vue {
     delay?: number;
     ariaLabelledBy?: string;
     $emit(eventName: 'input', value: any): this;
-    $emit(eventName: 'select', e: {originalEvent: Event, value: any}): this;
-    $emit(eventName: 'unselect', e: {originalEvent: Event, value: any}): this;
+    $emit(eventName: 'item-select', e: {originalEvent: Event, value: any}): this;
+    $emit(eventName: 'item-unselect', e: {originalEvent: Event, value: any}): this;
     $emit(eventName: 'dropdown-click', e: {originalEvent: Event, query: string}): this;
     $emit(eventName: 'complete', e: {originalEvent: Event, query: string}): this;
     $emit(eventName: 'clear'): this;
diff --git a/src/components/autocomplete/AutoComplete.vue b/src/components/autocomplete/AutoComplete.vue
index 7b0943448..7b53c8488 100644
--- a/src/components/autocomplete/AutoComplete.vue
+++ b/src/components/autocomplete/AutoComplete.vue
@@ -152,7 +152,7 @@ export default {
                 this.$emit('input', item);
             }
 
-            this.$emit('select', {
+            this.$emit('item-select', {
                 originalEvent: event,
                 value: item
             });
@@ -167,7 +167,7 @@ export default {
             let removedValue = this.value[index];
             let newValue = this.value.filter((val, i) => (index !== i));
             this.$emit('input', newValue);
-            this.$emit('unselect', {
+            this.$emit('item-unselect', {
                 originalEvent: event,
                 value: removedValue
             });
@@ -323,7 +323,7 @@ export default {
                             let newValue = this.value.slice(0, -1);
 
                             this.$emit('input', newValue);
-                            this.$emit('unselect', {
+                            this.$emit('item-unselect', {
                                 originalEvent: event,
                                 value: removedValue
                             });
diff --git a/src/components/calendar/Calendar.d.ts b/src/components/calendar/Calendar.d.ts
index 4b4cdc788..7479a144f 100644
--- a/src/components/calendar/Calendar.d.ts
+++ b/src/components/calendar/Calendar.d.ts
@@ -57,7 +57,7 @@ export declare class Calendar extends Vue {
     $emit(eventName: 'hide'): this;
     $emit(eventName: 'month-change', e: { month: number, year: number }): this;
     $emit(eventName: 'year-change', e: { month: number, year: number }): this;
-    $emit(eventName: 'select', value: Date): this;
+    $emit(eventName: 'date-select', value: Date): this;
     $emit(eventName: 'input', value: Date): this;
     $emit(eventName: 'today-click', value: Date): this;
     $emit(eventName: 'clear-click', event: Event): this;
diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index 48ff3f439..bbebf094f 100644
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -783,7 +783,7 @@ export default {
                 this.updateModel(modelVal);
                 this.updateInputFieldValue(modelVal);
             }
-            this.$emit('select', date);
+            this.$emit('date-select', date);
         },
         updateModel(value) {
             this.$emit('input', value);
@@ -1221,7 +1221,7 @@ export default {
 
             this.updateModel(value);
             this.updateInputFieldValue(value);
-            this.$emit('select', value);
+            this.$emit('date-select', value);
         },
         toggleAMPM(event) {
             this.pm = !this.pm;
diff --git a/src/components/dropdown/Dropdown.d.ts b/src/components/dropdown/Dropdown.d.ts
index 5cbe0be42..bcf49cf0c 100644
--- a/src/components/dropdown/Dropdown.d.ts
+++ b/src/components/dropdown/Dropdown.d.ts
@@ -16,6 +16,7 @@ export declare class Dropdown extends Vue {
     showClear?: boolean;
     tabindex?: string;
     ariaLabelledBy?: string;
+    appendTo?: string;
     $emit(eventName: 'input', value: string): this;
     $emit(eventName: 'change', e: { originalEvent: Event, value: string }): this;
     $slot: {
diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue
index fa93980f1..aadde1e54 100644
--- a/src/components/dropdown/Dropdown.vue
+++ b/src/components/dropdown/Dropdown.vue
@@ -55,7 +55,11 @@ export default {
         dataKey: null,
 		showClear: Boolean,
         tabindex: String,
-        ariaLabelledBy: null
+        ariaLabelledBy: null,
+        appendTo: {
+            type: String,
+            default: null
+        }
     },
     data() {
         return {
@@ -70,6 +74,7 @@ export default {
     previousSearchChar: null,
     searchValue: null,
     beforeDestroy() {
+        this.restoreAppend();
         this.unbindOutsideClickListener();
     },
     updated() {
@@ -267,6 +272,7 @@ export default {
             this.$emit('input', event.target.value);
         },
         onOverlayEnter() {
+            this.appendContainer();
             this.alignOverlay();
             this.bindOutsideClickListener();
 
@@ -278,7 +284,12 @@ export default {
             this.unbindOutsideClickListener();
         },
         alignOverlay() {
-            DomHandler.relativePosition(this.$refs.overlay, this.$refs.container);
+            if (this.appendTo) {
+                DomHandler.absolutePosition(this.$refs.overlay, this.$refs.container);
+                this.$refs.overlay.style.width = DomHandler.getOuterWidth(this.$refs.container) + 'px';
+            } else {
+                DomHandler.relativePosition(this.$refs.overlay, this.$refs.container);
+            }
         },
         updateModel(event, value) {
             this.$emit('input', value);
@@ -352,6 +363,22 @@ export default {
             }
 
             return null;
+        },
+        appendContainer() {
+            if (this.appendTo) {
+                if (this.appendTo === 'body')
+                    document.body.appendChild(this.$refs.overlay);
+                else
+                    document.getElementById(this.appendTo).appendChild(this.$refs.overlay);
+            }
+        },
+        restoreAppend() {
+            if (this.$refs.overlay && this.appendTo) {
+                if (this.appendTo === 'body')
+                    document.body.removeChild(this.$refs.overlay);
+                else
+                    document.getElementById(this.appendTo).removeChild(this.$refs.overlay);
+            }
         }
     },
     computed: {
diff --git a/src/views/autocomplete/AutoCompleteDoc.vue b/src/views/autocomplete/AutoCompleteDoc.vue
index 51050675d..02ada83cb 100644
--- a/src/views/autocomplete/AutoCompleteDoc.vue
+++ b/src/views/autocomplete/AutoCompleteDoc.vue
@@ -167,13 +167,13 @@ export default {
                                 <td>Callback to invoke to search for suggestions.</td>
                             </tr>
                             <tr>
-                                <td>select</td>
+                                <td>item-select</td>
                                 <td>event.originalEvent: Browser event <br />
                                     event.value: Selected item</td>
                                 <td>Callback to invoke when a suggestion is selected.</td>
                             </tr>
                             <tr>
-                                <td>unselect</td>
+                                <td>item-unselect</td>
                                 <td>event.originalEvent: Browser event <br />
                                     event.value: Unselected item</td>
                                 <td>Callback to invoke when a selected value is removed.</td>
diff --git a/src/views/calendar/CalendarDoc.vue b/src/views/calendar/CalendarDoc.vue
index 4e398fcbb..a960356b3 100644
--- a/src/views/calendar/CalendarDoc.vue
+++ b/src/views/calendar/CalendarDoc.vue
@@ -424,10 +424,9 @@ export default {
                         </thead>
                         <tbody>
                             <tr>
-                                <td>select</td>
+                                <td>date-select</td>
                                 <td>value: Selected value</td>
-                                <td>Callback to invoke when a date is selected.
-                                </td>
+                                <td>Callback to invoke when a date is selected.</td>
                             </tr>
                             <tr>
                                 <td>show</td>
diff --git a/src/views/dropdown/DropdownDoc.vue b/src/views/dropdown/DropdownDoc.vue
index 4e180991d..cde97c0c6 100644
--- a/src/views/dropdown/DropdownDoc.vue
+++ b/src/views/dropdown/DropdownDoc.vue
@@ -155,6 +155,12 @@ data() {
                                 <td>string</td>
                                 <td>null</td>
                                 <td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
+                            </tr>
+                            <tr>
+                                <td>appendTo</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Id of the element or "body" for document where the overlay should be appended to.</td>
                             </tr>
 						</tbody>
 					</table>