Components: cdkTextareaAutosize shows unneeded scrollbar

[gizmodus]

Bug:

In textareas with cdkTextareaAutosize the scrollbar sometimes shows even if it is not necessary. Interestingly, this problem can be solved by disabling the class below which should actually solve this problem:
https://github.com/angular/material2/blob/4884dacb58b8bac832819827185e6fce0f119b0a/src/lib/input/input.scss#L118

What is the expected behavior?

Textareas with cdkTextareaAutosize should only show a scrollbar if one is needed.

What is the current behavior?

See above.

What are the steps to reproduce?

Add some lines in this stackblitz. The problem can be solved by disabling the css styles:

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

https://stackblitz.com/edit/angular-material2-issue-kz8jyf?file=app/app.component.html

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

Angular 6.1.2
Angular Material 6.4.6
Chrome 68.0.3440.106 (Windows)

Is there anything else we should know?

No.

[KevinToala]

Tengo el mismo problema. La solución de @gizmodus me sirvio. Gracias!!!

[samir-h]

@josephperrott @mmalerba The issue is connected with the height calculation when the textarea has box-sizing: border-box. Changing the box-sizing to any other value fixed the problem for me.

[simeyla]

Neither box-sizing nor removing margin or padding changed it for me.

There's all kinds of 'hacks' mentioned in the sourcecode. I imagine these don't work forever - and something Chrome right now is most definitely broken.

Using the stackblitz template I added a simple control. If the browser is at 100% it works ok, but zoom in and you get scrollbars.

Also my screen DPI on Windows is set to 125% (4k screen) so that could have an effect too.

A better solution for me was this:

textarea[cdktextareaautosize].mat-input-element {
    overflow: hidden;
}

[mjamin]

I can confirm that while setting box-sizing: content-box fixed the issue for me @ 100%, the issue persists when zoomed in (at some, not all zoom levels).

It seems that using browser zoom has various issues/edge-cases unrelated to material (at least in Chrome).

[simeyla]

@mjamin the problem is definitely related to material. They calculate a height in pixels based on a calculated line height - the logic to do that is quite involved if you look at the source.

The problem is the calculation is so exact that there’s no room for error when you add in the floating point calculations of zooming.

I found adding one pixel to the calculated size in the browser dev tools fixed it - but the quick fix was to set overflow: hidden.

[andbjer]

setting overflow: hidden; is not a solution if you're planning to use cdkAutosizeMaxRows. This fixed the problem in my case:

textarea.mat-input-element.cdk-textarea-autosize {
  box-sizing: content-box;
}

[aroraadi65]

Bug:

In textareas with cdkTextareaAutosize the scrollbar sometimes shows even if it is not necessary. Interestingly, this problem can be solved by disabling the class below which should actually solve this problem:
https://github.com/angular/material2/blob/4884dacb58b8bac832819827185e6fce0f119b0a/src/lib/input/input.scss#L118

What is the expected behavior?

Textareas with cdkTextareaAutosize should only show a scrollbar if one is needed.

What is the current behavior?

See above.

What are the steps to reproduce?

Add some lines in this stackblitz. The problem can be solved by disabling the css styles:

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

https://stackblitz.com/edit/angular-material2-issue-kz8jyf?file=app/app.component.html

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

Angular 6.1.2
Angular Material 6.4.6
Chrome 68.0.3440.106 (Windows)

Is there anything else we should know?

No.

hi @gizmodus
I just came across the bug you mentioned. As @andbjer pointed, we can set the box-sizing property of the textarea to content-box which fixes it. However, in some cases, when the textarea is empty, the scroll bar may appear until we start editing the textarea, after which it disappears, even if we leave it blank again.
This may not seem such a big issue but it does leave a bad first impression on the user. I think a possible solution is to wait for the changes to be applied, then trigger text resize. It is the same solution as mentioned in the 'Auto-resizing textarea' example of the official doc (here). I'm attaching a snippet of the solution below. Please point out if I'm missing something.

import { Component, OnInit, NgZone, ViewChildren, QueryList } from '@angular/core';
import { CdkTextareaAutosize } from '@angular/cdk/text-field';
import { take } from 'rxjs/operators';

@Component({
  selector: 'app-createform',
  templateUrl: './createform.component.html',
  styleUrls: ['./createform.component.scss']
})
export class CreateformComponent implements OnInit {
  @ViewChildren(CdkTextareaAutosize) autosize: QueryList<CdkTextareaAutosize>;

  constructor(private _ngZone: NgZone) {}

  ngOnInit() {
    this.triggerResize();
  }

  triggerResize() {
    // Wait for changes to be applied, then trigger textarea resize.
    this._ngZone.onStable.pipe(take(1)).subscribe(() => 
      this.autosize.forEach(el => el.resizeToFitContent(true))
    );
  }
}

<mat-form-field [style.fontSize]="'2rem'">
  <mat-label>Title</mat-label>
  <textarea matInput cdkTextareaAutosize #autosize="cdkTextareaAutosize">
  </textarea>
</mat-form-field>

[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.

[ahnpnl]

I ran into the same issue, box-sizing: content-box + trigger resize to fit content in AfterViewInit work for me. I wonder if this will be fixed natively in the future ?

[thecheeto]

I also ran into this issue, along with an issue where the textarea would grow as the input got longer, but wouldn't shrink as the input got smaller.

The fix for both was to make sure to include the text-field styles like:

@import "~@angular/cdk/text-field";
@include cdk-text-field();

When the cdkTextareaAutosize is recalculating the height it adds the class cdk-textarea-autosize-measuring (styles specific to that class shown below) and without those styles the scrollHeight would never shrink.

  // This class is temporarily applied to the textarea when it is being measured. It is immediately
  // removed when measuring is complete. We use `!important` rules here to make sure user-specified
  // rules do not interfere with the measurement.
  textarea.cdk-textarea-autosize-measuring {
    height: auto !important;
    overflow: hidden !important;
    // Having 2px top and bottom padding seems to fix a bug where Chrome gets an incorrect
    // measurement. We just have to account for it later and subtract it off the final result.
    padding: 2px 0 !important;
    box-sizing: content-box !important;
  }

full source

[jeyjey626]

I encountered the same issue as mentioned above, also with the shrinking of the textearea - it was shrinking but only one row at a time. This was fixed by manually overriding .cdk-textarea-measuring

textarea.cdk-textarea-autosize-measuring {
height: auto !important;
overflow: hidden !important;
padding: 25px !important;
box-sizing: content-box !important;
}

But it didn't resolve the scroll issue. The content-box created two additional rows of textarea that were unfillable until we ran to the limit of the rows - then the content started pouring into those two extra rows and rightfully created a scrollbar.
So the scroll problem was fixed by changing the top and bottom margins to 2px as suggested in one of the answers.
Not the prettiest solution, but hey - it worked, eventually

[mmalerba]

Closing as a dup of https://github.com/angular/components/issues/13161

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}