skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(autosize): properly detect line-height in firefox (#6190)

Browse Source 
* fix(autosize): properly detect line-height in firefox

In Firefox it happens that textarea elements are always bigger than the specified amount of rows. This is because Firefox tries to add extra space for the horizontal scrollbar.

As a workaround that removes the extra space for the scrollbar, we can just set overflow to hidden. This ensures that there is no invalid calculation of the line height.

See Firefox bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=33654

Fixes #6179

* Fix test name
This commit is contained in:
Paul Gschwendtner
2017-08-02 00:09:27 +02:00
committed by tinayuangao
parent 8bb54ca456
commit 3a766f148f
2 changed files with 22 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/input/autosize.spec.ts
+15
View File
@@ -130,6 +130,21 @@ describe('MdTextareaAutosize', () => {
.toBeGreaterThan(previousMinHeight, 'Expected the textarea to grow to two rows.');
});
it('should calculate the proper height based on the specified amount of max rows', () => {
fixture.componentInstance.content = [1, 2, 3, 4, 5, 6, 7, 8].join('\n');
fixture.detectChanges();
autosize.resizeToFitContent();
expect(textarea.clientHeight)
.toBe(textarea.scrollHeight, 'Expected textarea to not have a vertical scrollbar.');
fixture.componentInstance.maxRows = 5;
fixture.detectChanges();
expect(textarea.clientHeight)
.toBeLessThan(textarea.scrollHeight, 'Expected textarea to have a vertical scrollbar.');
});
it('should properly resize to content on init', () => {
// Manually create the test component in this test, because in this test the first change
// detection should be triggered after a multiline content is set.
src/lib/input/autosize.ts
+7
View File
@@ -126,6 +126,13 @@ export class MdTextareaAutosize implements AfterViewInit {
textareaClone.style.minHeight = '';
textareaClone.style.maxHeight = '';
// In Firefox it happens that textarea elements are always bigger than the specified amount
// of rows. This is because Firefox tries to add extra space for the horizontal scrollbar.
// As a workaround that removes the extra space for the scrollbar, we can just set overflow
// to hidden. This ensures that there is no invalid calculation of the line height.
// See Firefox bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=33654
textareaClone.style.overflow = 'hidden';
textarea.parentNode!.appendChild(textareaClone);
this._cachedLineHeight = textareaClone.clientHeight;
textarea.parentNode!.removeChild(textareaClone);