From 14178c048f71267232ab7ec95e42586f09b3c0a6 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 18 Jan 2021 20:34:52 +0100 Subject: [PATCH] fix(material/input): uncessary scroll bar on auto-resize textarea in some cases It's common for apps to set `box-sizing: border-box` on all elements in the app which ends up causing unnecessary scroll bars on auto-resizing textareas. These changes explicitly set `box-sizing: content-box` to fix it. Note that ideally we'd do this at the `cdk/text-field` level since it is the one responsible for resizing the textarea, but we generally try to avoid changing the user's layout through the CDK. Fixes #21560. --- src/material/form-field/form-field-input.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/material/form-field/form-field-input.scss b/src/material/form-field/form-field-input.scss index a67da1fae23d..3031d30c528f 100644 --- a/src/material/form-field/form-field-input.scss +++ b/src/material/form-field/form-field-input.scss @@ -32,6 +32,11 @@ // placeholder, the alignment should be inherited here. text-align: inherit; + // It's common for developers to set `box-sizing: border-box` on every element on the page. + // Reset it to `content-box` since all of our styles are written with it in mind. `border-box` + // can also cause unnecessary scrollbars on auto-resizing textareas (see #21560). + box-sizing: content-box; + // Undo the red box-shadow glow added by Firefox on invalid inputs. // See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-invalid &:-moz-ui-invalid {