From f44e1e51c8553519916ad7b94e847551e6d1c73a Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 30 May 2024 11:09:49 +0300 Subject: [PATCH 1/2] fix(textarea): fix label position --- .../core/styles/components/input/_input-group-theme.scss | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss index 8a3b597c3f4..5ec72524a4f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss @@ -1014,11 +1014,12 @@ } } - %form-group-textarea-label { - transition-duration: 0ms; - } - @if $material-theme { + %form-group-textarea-label { + top: $input-top-padding; + margin-block-end: auto; + } + %textarea-group-label--focused { transform: translateY(0); top: calc(#{$input-top-padding} / 4); From 8e4cc18ed22c3fd0e7790cd1b4e5659fbdababbf Mon Sep 17 00:00:00 2001 From: desig9stein Date: Thu, 30 May 2024 15:09:32 +0300 Subject: [PATCH 2/2] fix(textarea): make sure that the fixed label is on the same position as the placeholder. --- .../components/input/_input-group-component.scss | 4 ++++ .../components/input/_input-group-theme.scss | 14 +++++++++++++- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss index 259dd6e0b8e..26005cd60db 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss @@ -137,6 +137,10 @@ @extend %textarea-group--outlined !optional; } + @include mx(textarea-group, box) { + @extend %textarea-group--box !optional; + } + @include mx(textarea-group, focused) { @include e(label) { @extend %textarea-group-label--focused !optional; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss index 5ec72524a4f..91cf154a234 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss @@ -1016,10 +1016,22 @@ @if $material-theme { %form-group-textarea-label { - top: $input-top-padding; + top: calc($input-top-padding - #{rem(1px)}); margin-block-end: auto; } + %textarea-group--outlined { + %form-group-textarea-label { + top: calc($input-top-padding - #{rem(3px)}); + } + } + + %textarea-group--box { + %form-group-textarea-label { + top: calc($input-top-padding - #{rem(2px)}); + } + } + %textarea-group-label--focused { transform: translateY(0); top: calc(#{$input-top-padding} / 4);