Uncessary vertical scrollbar in a textarea inside a MatFormField.

[tofesath]

Bug, feature request, or proposal:

The vertical scrollbar is displayed, when count of rows does not reach maxRows.

What is the expected behavior?

The vertical scrollbar is displayed only if count of rows is more than max maxRows.

What is the current behavior?

The vertical scrollbar is visible, when count of rows is between minRows and maxRows.

What are the steps to reproduce?

Min rows sets to 2.
Max rows sets to 5.
Add some text in a 3 rows, everything is correct.
The vertical scrollbar is visible on a 4th row (something wrong) but on 5th row is invisible. (correct).
https://stackblitz.com/edit/angular-v6bw5l

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

angular - 6.0.1, material - 6.2.0, browser - chrome

[crisbeto]

I wasn't able to reproduce it. Here's what a textarea with 4 rows looks like for me:

[tofesath]

Well, it seems that I found where might be the problem. The issue seems to depend on the text size set in the Windows (Control Panel -> Appearance and Personalization -> Display on Windows 7). When I set this to Smaller - 100%, the issue does not appear; when I set the text size in Windows to Medium - 125% (which is the default option), the issue occurs:

[manklu]

It's enough to zoom in the browser.

At 110% Zoom

Looks like a rounding problem to me.

[danielronnkvist]

Seems to be caused by the fix for #10376 as pointed out by @jkruse here.

[MikeShakmakov]

Guys seems like I figured out what is the problem... Just try to set box-sizing: content-box to textarea element and everything goes well then. Recalculation doesn't take into account box-sizing: border-box.

[tbunique]

@Mike--S that fix doesn't work for me.

I'll just hide the overflow until the problem is fixed.

[MikeShakmakov]

@Mike--S that fix doesn't work for me.

I'll just hide the overflow until the problem is fixed.

As for box-sizing - it was a specific problem on my project, because every element has default style box-sizing: border box. I think this is very frequent case.
As for you, I guess you have increased font scaling on operating system level. I can reproduce this bug on stackblitz with 125% font size, but when I apply 100% font size bug is not reproduced with latest chrome, win 10.

[rtsdgim]

textarea.mat-input-element {
    padding: 0;
    margin: 0;
}

.mat-form-field {
    line-height: normal;
}

[sergiubologa]

The workaround that works for me is to set a different top and bottom padding on the textarea:

the default is

textarea.mat-input-element {
    padding: 2px 0;
}

and I've changed it to

textarea.mat-input-element {
    padding: 3px 0;
}

[teoeter]

For me the issue was that i had a global
/* Box-sizing border-box */

• {
  box-sizing: border-box;
  }

after setting it to initial the component worked as intended.