fix(input-group): fix textarea width to not overlap the suffix

didimmova · didimmova · commit c6cc006f9777 · 2020-09-03T09:45:26.000+03:00
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
@@ -1067,21 +1067,18 @@
     }
 
     %form-group-textarea--box {
-        width: calc(100% + #{rem(16px, map-get($base-scale-size, 'comfortable')) * 2}); /* add the padding to the width */
         margin: 0 -#{rem(16px, map-get($base-scale-size, 'comfortable'))};
         padding-#{$left}: rem(16px, map-get($base-scale-size, 'comfortable'));
         padding-#{$left}: rem(16px, map-get($base-scale-size, 'comfortable'));
     }
 
     %form-group-textarea--box-cosy {
-        width: calc(100% + #{rem(16px, map-get($base-scale-size, 'cosy')) * 2}); /* add the padding to the width */
         margin: 0 -#{rem(16px, map-get($base-scale-size, 'cosy'))};
         padding-#{$left}: rem(16px, map-get($base-scale-size, 'cosy'));
         padding-#{$left}: rem(16px, map-get($base-scale-size, 'cosy'));
     }
 
     %form-group-textarea--box-compact {
-        width: calc(100% + #{rem(16px, map-get($base-scale-size, 'compact')) * 2}); /* add the padding to the width */
         margin: 0 -#{rem(16px, map-get($base-scale-size, 'compact'))};
         padding-#{$left}: rem(16px, map-get($base-scale-size, 'compact'));
         padding-#{$left}: rem(16px, map-get($base-scale-size, 'compact'));

Original file line number	Diff line number	Diff line change
`@@ -1067,21 +1067,18 @@`
`1067`	`1067`	`}`
`1068`	`1068`
`1069`	`1069`	`%form-group-textarea--box {`
`1070`		`- width: calc(100% + #{rem(16px, map-get($base-scale-size, 'comfortable')) * 2}); /* add the padding to the width */`
`1071`	`1070`	`margin: 0 -#{rem(16px, map-get($base-scale-size, 'comfortable'))};`
`1072`	`1071`	`padding-#{$left}: rem(16px, map-get($base-scale-size, 'comfortable'));`
`1073`	`1072`	`padding-#{$left}: rem(16px, map-get($base-scale-size, 'comfortable'));`
`1074`	`1073`	`}`
`1075`	`1074`
`1076`	`1075`	`%form-group-textarea--box-cosy {`
`1077`		`- width: calc(100% + #{rem(16px, map-get($base-scale-size, 'cosy')) * 2}); /* add the padding to the width */`
`1078`	`1076`	`margin: 0 -#{rem(16px, map-get($base-scale-size, 'cosy'))};`
`1079`	`1077`	`padding-#{$left}: rem(16px, map-get($base-scale-size, 'cosy'));`
`1080`	`1078`	`padding-#{$left}: rem(16px, map-get($base-scale-size, 'cosy'));`
`1081`	`1079`	`}`
`1082`	`1080`
`1083`	`1081`	`%form-group-textarea--box-compact {`
`1084`		`- width: calc(100% + #{rem(16px, map-get($base-scale-size, 'compact')) * 2}); /* add the padding to the width */`
`1085`	`1082`	`margin: 0 -#{rem(16px, map-get($base-scale-size, 'compact'))};`
`1086`	`1083`	`padding-#{$left}: rem(16px, map-get($base-scale-size, 'compact'));`
`1087`	`1084`	`padding-#{$left}: rem(16px, map-get($base-scale-size, 'compact'));`