Merge pull request #5028 from IgniteUI/fix-#4752-master

fix(input-group): japanese symbols get cut off in input and label

Author: kdinev

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

@@ -505,26 +505,24 @@
         position: absolute;
         width: 100%;
         transform: translateY(50%); /* 8px, base is 16px */
-        line-height: rem(16px, map-get($base-scale-size, 'comfortable')) !important;
-        height: rem(18px, map-get($base-scale-size, 'comfortable'));
+        line-height: 1 !important;
+        height: rem(18px);
         backface-visibility: hidden;
         will-change: transform;
         transform-origin: top left;
-        transition: transform $transition-timing, color $transition-timing;
+        transition: transform $transition-timing, color $transition-timing, margin $transition-timing;
 
         [dir='rtl'] & {
             transform-origin: top right;
         }
     }
 
     %form-group-label--cosy {
-        line-height: rem(16px, map-get($base-scale-size, 'cosy')) !important;
-        height: rem(18px, map-get($base-scale-size, 'cosy'));
+        margin-top: rem(-2px);
     }
 
     %form-group-label--compact {
-        line-height: rem(16px, map-get($base-scale-size, 'compact')) !important;
-        height: rem(18px, map-get($base-scale-size, 'compact'));
+        margin-top: rem(-4px);
     }
 
     %form-group-label--box {
@@ -534,6 +532,7 @@
     %form-group-label--float {
         overflow: visible;
         transform: translateY(-50%) scale(.75);
+        margin-top: auto;
     }
 
     %form-group-label--fixed {
@@ -574,6 +573,8 @@
         color: --var($theme, 'filled-text-color');
         outline-style: none;
         box-shadow: none;
+        border-top: rem(3px) solid transparent;
+        padding-bottom: rem(3px);
 
         &::-webkit-input-placeholder {
             line-height: normal;
@@ -886,17 +887,6 @@
     $input-text-props: igx-type-scale-category($type-scale, $input-text);
 
     @include igx-scope('.igx-typography') {
-        %form-group-label {
-            @include igx-type-style($type-scale, $input-text) {
-                // This is embarrassing but there's no other
-                // way to extract the font-size the user sets
-                // in case they use custom typography :(
-                // We need the padding so that the text doesn't get
-                // cut off.
-                padding-bottom: map-get($input-text-props, 'font-size');
-            }
-        }
-
         %form-group-input {
             @include igx-type-style($type-scale, $input-text) {
                 margin: 0;

projects/igniteui-angular/src/lib/select/select-positioning-strategy.ts

@@ -48,7 +48,7 @@ export class SelectPositioningStrategy extends ConnectedPositioningStrategy impl
     }
 
     private positionNoScroll(contentElement: HTMLElement, CURRENT_POSITION_Y: number) {
-        contentElement.style.top = `${CURRENT_POSITION_Y - this.itemTextToInputTextDiff }px`;
+        contentElement.style.top = `${CURRENT_POSITION_Y - this.itemTextToInputTextDiff}px`;
         this.deltaY = CURRENT_POSITION_Y -
             (this.select.input.nativeElement.getBoundingClientRect() as DOMRect).top - this.itemTextToInputTextDiff;
     }
@@ -197,7 +197,7 @@ export class SelectPositioningStrategy extends ConnectedPositioningStrategy impl
                         if (currentScroll === 0) {
                             this.positionNoScroll(contentElement, CURRENT_POSITION_Y);
                             return;
-                        // (more than 5 items) and current scroll
+                            // (more than 5 items) and current scroll
                         } else {
                             this.positionAndScrollBottom(contentElement, OUT_OF_BOUNDS.Amount);
                             return;

src/app/input-group/input-group-child.sample.html

@@ -3,9 +3,43 @@ <h3 class="sample-title">Line Style Input With Different Display Density</h3>
     <!-- Basic text field -->
     <igx-input-group>
         <input igxInput name="firstName" type="text" [(ngModel)]="user.firstName" required />
-        <label igxLabel for="firstName">Text Field</label>
+        <label igxLabel for="firstName">日日日</label>
+        <igx-prefix>
+            <igx-icon>person</igx-icon>
+        </igx-prefix>
     </igx-input-group>
 
+    <igx-input-group type="box">
+        <input igxInput name="firstName" type="text" [(ngModel)]="user.firstName" required />
+        <label igxLabel for="firstName">日日日</label>
+        <igx-prefix>
+            <igx-icon>person</igx-icon>
+        </igx-prefix>
+    </igx-input-group>
+
+    <igx-input-group type="border">
+        <input igxInput name="firstName" type="text" [(ngModel)]="user.firstName" required />
+        <label igxLabel for="firstName">日日日</label>
+        <igx-prefix>
+            <igx-icon>person</igx-icon>
+        </igx-prefix>
+    </igx-input-group>
+
+    <igx-input-group>
+        <textarea igxInput name="firstName" type="text" [(ngModel)]="user.firstName" required></textarea>
+        <label igxLabel for="firstName">日日日</label>
+        <igx-prefix>
+            <igx-icon>person</igx-icon>
+        </igx-prefix>
+    </igx-input-group>
+
+    <igx-input-group type="border">
+        <textarea igxInput name="firstName" type="text" [(ngModel)]="user.firstName" required></textarea>
+        <label igxLabel for="firstName">日日日</label>
+        <igx-prefix>
+            <igx-icon>person</igx-icon>
+        </igx-prefix>
+    </igx-input-group>
     <!-- Basic text field w/ placeholder -->
     <igx-input-group>
         <label igxLabel>Label</label>