Material: Vertical scroll bar broken in textarea

[ChristinaKochan]

The scroll bar doesn't work correctly in textarea. Using your Basic Usage input demo (https://material.angularjs.org/#/demo/material.components.input) I added the following style on the textarea:

style="max-height: 25vh; overflow-y: auto;"

This works to show the vertical scroll bar when the text lines exceed the max height, but the scroll bar does nothing and you can never see the text that is below the visible height.

[marcysutton]

Looks like the textarea component dynamically sets a height for some reason. After looking at the spec for multi-line textfields, there is no mention of height restrictions. However, it could be a confusing user interaction to have internal scrolling when there is a character counter on the bottom, which should always be visible.

Are you intending to limit scroll with the character counter? Perhaps we need to make a distinction and only set an inline height when md-maxlength is present.

[ChristinaKochan]

I want to be able to limit the size of the text area while still being able to see the character counter. At the moment since the scrollbar doesn't work on the textarea I have to set a scrollbar on a div containing the textarea, which is ugly, doesn't function properly, and hides the counter.

We have a modal dialog that is somewhat narrow but has a textarea with a max length of 500. The dialog itself has a maximum height but we need to limit the height of the textarea so that a scrollbar doesn't appear for the entire dialog. Here is the dialog when we haven't reached the max height, which looks as it should:

Here is the dialog when we have reached the max height, which adds a scrollbar on the div because the scrollbar on the textarea is broken, which also hides the counter:

And here is what we would ideally like to see, which does actually display correctly when we set style="max-height: 25vh; overflow-y: auto;" on the textarea, but the scrollbar is not movable so you can never see the text that is below the max height cutoff:

[chauduc]

Yes!!! i have the same problem like ChristinaElaine.
I think we need an option for scrolling or auto increase height textarea.
Because increasing height of textarea is cause of push submit button to bottom.
Sorry for my bad english

[zhulduz]

+1

[alexey-shaposhnikov]

hope you can fix this miserable bug.

[JustACodeMonkey]

+1. Expanding textareas are great everywhere, except for inside of a mdDialog, where the scrolling in the textarea breaks the scrolling in the mdDialog..

[MaximShoustin]

+1

[thebigredgeek]

Any update on this? Seems to still be broken...

[petarsubotic]

I (sort of) addressed this by wrapping the textarea / input-container in a div styled with overflow and max-height.

Prior to doing that i tried stopping propagation and giving the the md-no-autogrow directive a whirl without success.

[csotomon]

+1

[mikcox]

+1 on fixing this issue!!!

[betcn]

RAWR!!! TRIPLE BUMP

[rriemann]

Have you found a workaround for production?

[BenniG82]

With material 1.0.1 the following works for me:
Style:

md-input-container textarea[md-no-autogrow].md-input {
    height: inherit;
    overflow-y: auto;
}

<md-input-container>
    <label>MyLabel</label>
    <textarea rows="5" ng-model="ctrl.model"
        md-no-autogrow/>
</md-input-container>

[uriva]

+1

[lukengda]

+1
Solution from @BenniG82 works fine. Should be the default behaviour if autogrow is disabled!

[biomassives]

This message was created automatically by mail delivery software.

A message that you sent could not be delivered to one or more of its
recipients. This is a temporary error. The following address(es) deferred:

[email protected]
Domain biomassiv.es has exceeded the max emails per hour (622/500 (124%)) allowed. Message will be reattempted later

------- This is a copy of the message, including all the headers. ------
Received: from github-smtp2-ext3.iad.github.net ([192.30.252.194]:57983 helo=github-smtp2b-ext-cp1-prd.iad.github.net)
by ps5.websitehostserver.net with esmtps (TLSv1.2:ECDHE-RSA-AES256-GCM-SHA384:256)
(Exim 4.86_1)
(envelope-from [email protected])
id 1avsdM-000Lmv-P9
for [email protected]; Thu, 28 Apr 2016 15:34:00 -0500
Date: Thu, 28 Apr 2016 13:32:28 -0700
DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=github.com;
s=pf2014; t=1461875548;
bh=BFMEuIXW0nrRbP6dGoU7KqYrSymA7j+Kaws/XlBpXTM=;
h=From:Reply-To:To:Cc:In-Reply-To:References:Subject:List-ID:
List-Archive:List-Post:List-Unsubscribe:From;
b=T3JFSSDaoQLJDW/D+5PChWf9zNRHjQcjlTdRQLe3NbPEyFL3BB/LGrceKcHPWDkUv
HMKVhM3dk5Qg+N1kSc14g8irqDzD6bGffu9k7hZjcalSXxe5hjBFG7uDBMO6NX/sw4
dL9I4fnVDDWy9Afc3RFncqY5Q7mVR9I7IovQuSwE=
From: Thomas Burleson [email protected]
Reply-To: angular/material [email protected]
To: angular/material [email protected]
Cc:
Message-ID:
In-Reply-To:
References:
Subject: Re: [angular/material] Vertical scroll bar broken in textarea (#2039)
Mime-Version: 1.0
Content-Type: multipart/alternative;
boundary="--==_mimepart_5722735cc9ed1_516c3f9ecf6a52b8104063";
charset=UTF-8
Content-Transfer-Encoding: 7bit
Precedence: list
X-GitHub-Sender: ThomasBurleson
X-GitHub-Recipient: biomassives
List-ID: angular/material
List-Archive: https://github.com/angular/material
List-Post: mailto:[email protected]
List-Unsubscribe: mailto:unsub+0042d4e2c5591423aaf6[e-mail],
https://github.com/notifications/unsubscribe/AELU4gfSZocNNz6DgBKtopOOdNII7QGLks5p8RlcgaJpZM4D1VSH
X-Auto-Response-Suppress: All
X-GitHub-Recipient-Address: [email protected]

----==_mimepart_5722735cc9ed1_516c3f9ecf6a52b8104063
Content-Type: text/plain;
charset=UTF-8
Content-Transfer-Encoding: 7bit

Closed #2039.

---

You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/angular/material/issues/2039#event-644850777
----==_mimepart_5722735cc9ed1_516c3f9ecf6a52b8104063
Content-Type: text/html;
charset=UTF-8
Content-Transfer-Encoding: 7bit

Closed #2039.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub

----==_mimepart_5722735cc9ed1_516c3f9ecf6a52b8104063--