Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Uncessary vertical scrollbar in a textarea inside a MatFormField.

See original GitHub issue

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

Issue Analytics

State:
Created 5 years ago
Comments:14 (3 by maintainers)

Top GitHub Comments

8reactions

MikeShakmakovcommented, Jan 23, 2019

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.

2reactions

rtsdgimcommented, May 11, 2019

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

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

Top Results From Across the Web

Remove scrollbars from textarea - Stack Overflow

I was able to get rid of my scroll bar on the body of text by removing my max-height attribute ...

How to Hide Scrollbars with CSS - W3docs

By default, the <textarea> element comes with a vertical scrollbar. It helps the user to enter and review their text by scrolling up...

Content Jumping (and How To Avoid It) | CSS-Tricks

To fix it, I used the browser's DevTools to measure the height of the resulting content and hardcoded it as a min-height for...

Form Element - Lightning Design System

To vertically stack <label> and <input> pairs, place slds-form-element_stacked on the div with the class of slds-form-element for optimal spacing. Text Input.

Default Theme Changelog - KendoReact - Telerik

masked-textbox: Use high-level input for masked textbox base ... chat: remove redundant textbox styles (339c301); chat: scroll buttons ...