fix: multi input should attach to body (#3193)

* multi input should attach to body * string input
SAP · Sep 8, 2020 · ba0760f · ba0760f
1 parent fa24771
commit ba0760f
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 39 deletions.
diff --git a/libs/core/src/lib/multi-input/multi-input.component.html b/libs/core/src/lib/multi-input/multi-input.component.html
@@ -9,6 +9,7 @@
             [disabled]="disabled"
             [closeOnOutsideClick]="true"
             [fillControlMode]="fillControlMode"
+            appendTo="body"
             class="fd-multi-input-popover-custom"
         >
             <fd-popover-control>
@@ -78,6 +79,7 @@
         (focusEscapeList)="handleListFocusEscape($event)"
         [multiInputMode]="true"
         [style.maxHeight]="!mobile ? maxHeight : 'auto'"
+        [style.minWidth]="'100%'"
     >
         <li
             *ngFor="let value of displayedValues; let ind = index"

diff --git a/libs/core/src/lib/multi-input/multi-input.component.scss b/libs/core/src/lib/multi-input/multi-input.component.scss
@@ -13,55 +13,55 @@
 
 .fd-multi-input-custom {
     display: block;
+}
 
-    .fd-multi-input-item {
-        cursor: pointer;
-        padding: 0;
-    }
+.fd-multi-input-item {
+    cursor: pointer;
+    padding: 0;
+}
 
-    .fd-multi-input-popover-size {
-        overflow: auto;
-        display: block;
-    }
+.fd-multi-input-popover-size {
+    overflow: auto;
+    display: block;
+}
 
-    .fd-multi-input-popover-custom {
-        display: block;
-        .fd-tokenizer {
-            height: 100%;
-        }
+.fd-multi-input-popover-custom {
+    display: block;
+    .fd-tokenizer {
+        height: 100%;
     }
+}
 
-    .fd-multi-input-menu-overflow {
-        max-width: 100%;
-        overflow: auto;
-    }
-    .fd-input {
-        &.fd-multi-input-tokenizer-input {
-            margin-top: 0;
-            margin-bottom: 0;
-            padding-left: 0;
-            background-color: transparent;
-        }
+.fd-multi-input-menu-overflow {
+    max-width: 100%;
+    overflow: auto;
+}
+.fd-input {
+    &.fd-multi-input-tokenizer-input {
+        margin-top: 0;
+        margin-bottom: 0;
+        padding-left: 0;
+        background-color: transparent;
     }
+}
 
-    .fd-multi-input-show-all {
-        float: right;
-        background-color: transparent;
-        .fd-link:active {
-            color: inherit;
-        }
+.fd-multi-input-show-all {
+    float: right;
+    background-color: transparent;
+    .fd-link:active {
+        color: inherit;
     }
+}
 
-    .fd-multi-input-checkbox {
-        width: 100%;
-        cursor: pointer;
+.fd-multi-input-checkbox {
+    width: 100%;
+    cursor: pointer;
 
-        .fd-checkbox__label {
-            color: inherit;
-        }
+    .fd-checkbox__label {
+        color: inherit;
     }
+}
 
-    .fd-list--multi-input {
-        max-width: 100%;
-    }
+.fd-list--multi-input {
+    max-width: 100%;
 }