Skip to content

Commit

Permalink
fix(material/input): uncessary scroll bar on auto-resize textarea in …
Browse files Browse the repository at this point in the history
…some cases (#21619)

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.

(cherry picked from commit 915791b)
  • Loading branch information
crisbeto authored and annieyw committed Feb 9, 2021
1 parent 6ae8f62 commit 9145675
Showing 1 changed file with 5 additions and 0 deletions.
5 changes: 5 additions & 0 deletions src/material/form-field/form-field-input.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down

0 comments on commit 9145675

Please sign in to comment.