Using Angular v11 & Angular Material Form field how do I make a textarea mat-form-field take up entire space of container (not auto-grow as I type, but fill the space even if empty)? It should be dynamic solution using CSS only, so as page is resized, so does the text field.
Here's pic of actual page I'm working on. I tried to make sample on stackblitz, however the Material UI doesn't even show properly there - can it? Still hopefully it's helpful to clarify my question.
Ashot Aleqsanyan :
If I understand correctly your question you can just add this CSS in you style.css file. and add fill-container to the mat-form field element\n.mat-form-field.fill-container,\n.mat-form-field.fill-container .mat-form-field-infix,\n.mat-form-field.fill-container .mat-form-field-flex,\n.mat-form-field.fill-container .mat-form-field-wrapper {\n height: 100%;\n width: 100%;\n}\n\n.mat-form-field.fill-container textarea {\n height: calc(100% - 25px);\n}\n\nin temlplate\n<mat-form-field appearance="fill" class="fill-container">\n <mat-label>Textarea</mat-label>\n <textarea matInput [matTextareaAutosize]="false"></textarea>\n</mat-form-field>\n\nhere is the stackblitz example.\nhttps://stackblitz.com/edit/angular-9ms3ph?file=src/app/form-field-overview-example.html\nAlso if you can use matTextareaAutosize instead of this style, I recommend usage of this @Input property\nLike this\n<div>\n \n <mat-form-field appearance="fill" class="test">\n <mat-label>Textarea</mat-label>\n <textarea matInput [matTextareaAutosize]="true"></textarea>\n </mat-form-field>\n\n</div>\n",
2020-12-06T20:37:46
Abhijit :
I know this is not a good idea to do this, but can give a try\n<div #parent>\n\n <!-- ... other elements -->\n\n <mat-form-field class="textarea-mat-field">\n <mat-label>Text Content</mat-label>\n <textarea \n matInput \n placeholder="Enter document text..." \n #newTextContent\n style="height: {{parent.offsetHeight - newTextContent.getBoundingClientRect().top}}px"></textarea>\n </mat-form-field>\n</div>\n",
2020-12-06T20:50:58