How do you disable resize of an Angular 2 Material md-textarea element?

Question

I'm unable to disable res-zing on an md-textarea. This is how I've been trying:

<md-textarea md-no-resize rows="3"></md-textarea>

Doesn't seem to work?

score 5 · Answer 1 · edited May 23 '17 at 12:02

5

You can add the following css to disable the feature entirely - as described here

textarea { resize: none; }

Working plunkr example: https://plnkr.co/edit/r5JhFNd4hKCk6QqTL27B?p=preview

Hope this helps.

edited May 23 '17 at 12:02

Community

1
1

answered Mar 08 '17 at 09:55

ChrisEenberg

773
1
5
19

Hmmm.... we may be on the right track. I set min-width: 100%, and that stopped the width from shrinking, but max-width and min/max-height don't seem to have an effect. Also removing that drag-icon in the bottom-right of the text area would be awesome, and would prevent any resizing at all. – Jus10 Mar 08 '17 at 20:28
I have updated my answer to do what you want it to :) – ChrisEenberg Mar 10 '17 at 13:17
At the moment I've screwed up some files in the project and it all fell apart. Once it's all back up and running I'll test this out. I'm 90% sure that I did this and it had no effect, but I will keep you posted. Thanks! – Jus10 Mar 14 '17 at 14:24

score 2 · Answer 2 · edited Nov 10 '20 at 10:29

2

 <textarea matTextareaAutosize matAutosizeMinRows="9" matAutosizeMaxRows="9" </textarea>

edited Nov 10 '20 at 10:29

4b0

21,981
30
95
142

answered Nov 10 '20 at 10:25

Iván Kollár

39
1
3

1

It's good practice on StackOverflow to add an explanation as to why your solution should work. – 4b0 Nov 10 '20 at 10:29
it looks self-explanatory so an explanation would be redundant – Xel Jun 14 '23 at 19:40

score 0 · Answer 3 · edited Aug 25 '17 at 02:55

0

Try disabling autogrow like this:

<md-input-container class="md-block">
    <textarea ng-model="" md-maxlength="250" rows="3" md-select-on-focus md-no-autogrow>
    </textarea>
</md-input-container>

edited Aug 25 '17 at 02:55

tristansokol

4,054
2
17
32

answered Aug 24 '17 at 07:39

popovich

11

1

this is a detective's job. what's the change? and the reason? – Daniel Alder Aug 24 '17 at 08:34
1

While this code snippet may solve the problem, it doesn't explain why or how it answers the question. Please [include an explanation for your code](//meta.stackexchange.com/q/114762/269535), as that really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. **Flaggers / reviewers:** [For code-only answers such as this one, downvote, don't delete!](//meta.stackoverflow.com/a/260413/2747593) – Patrick Aug 24 '17 at 11:47

How do you disable resize of an Angular 2 Material md-textarea element?

3 Answers3