4

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.

Ben
  • 495
  • 1
  • 7
  • 17

3 Answers3

3

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

.mat-form-field.fill-container,
.mat-form-field.fill-container .mat-form-field-infix,
.mat-form-field.fill-container .mat-form-field-flex,
.mat-form-field.fill-container .mat-form-field-wrapper {
  height: 100%;
  width: 100%;
}

.mat-form-field.fill-container textarea {
  height: calc(100% - 25px);
}

in temlplate

<mat-form-field appearance="fill" class="fill-container">
    <mat-label>Textarea</mat-label>
    <textarea matInput [matTextareaAutosize]="false"></textarea>
</mat-form-field>

here is the stackblitz example. https://stackblitz.com/edit/angular-9ms3ph?file=src/app/form-field-overview-example.html

Also if you can use matTextareaAutosize instead of this style, I recommend usage of this @Input property

Like this

<div>
  
  <mat-form-field appearance="fill" class="test">
    <mat-label>Textarea</mat-label>
    <textarea matInput [matTextareaAutosize]="true"></textarea>
  </mat-form-field>

</div>
Ashot Aleqsanyan
  • 4,252
  • 1
  • 15
  • 27
  • It already fills width. I want it to fill height as well (height:100% doesn't work). Also I want the nice Material format to remain intact. – Ben Dec 06 '20 at 20:59
  • @Ben I found a broken style, I have updated both(answer and example). – Ashot Aleqsanyan Dec 06 '20 at 21:33
  • It didn't work for me. Also on your stackbitz example it doesn't work -- try to type a lot, yo u'll see it goes past the text box... and also past the bottom of page. – Ben Dec 06 '20 at 21:35
  • @Ben please refresh the Stackblitz example I have fixed it. – Ashot Aleqsanyan Dec 06 '20 at 21:46
  • It seems better now... but do you have solution without using calc() and hardcoded 25px? – Ben Dec 06 '20 at 22:08
  • @Ben it's ok, it's the margin and padding of the textarea element, you can leave it like that. – Ashot Aleqsanyan Dec 06 '20 at 22:13
  • thanks for your help!! I found solution and posted here. I used your sample as starting point so that Material UI displays correctly. – Ben Dec 06 '20 at 23:02
0

I know this is not a good idea to do this, but can give a try

<div #parent>

  <!-- ... other elements -->

  <mat-form-field class="textarea-mat-field">
     <mat-label>Text Content</mat-label>
     <textarea 
      matInput  
      placeholder="Enter document text..." 
      #newTextContent
      style="height: {{parent.offsetHeight - newTextContent.getBoundingClientRect().top}}px"></textarea>
  </mat-form-field>
</div>
Abhijit
  • 382
  • 3
  • 10
  • I want it dynamic. As page resizes it should as well. Prefer not to use any scripts, CSS only solution. – Ben Dec 06 '20 at 21:00
0

I found solution finally that is fully dynamic without use of calc or any hard coded adjustments (notice you can add content in section above textarea and it resizes dynamically), see on stackblitz. One of the keys to making it work is this CSS, which I don't quiet understand:

*,
::after,
::before {
  box-sizing: border-box;
}
Ben
  • 495
  • 1
  • 7
  • 17
  • I did learn that the CSS above makes all elements' width/height account for border, padding as well, good explanation here: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing to those interested. – Ben Dec 08 '20 at 21:13
  • I don't know why this is the accepted answer, it has no effect whatsoever related to the OP's question. The correct answer (or at least one that works) is this one: https://stackoverflow.com/a/53621508/134120 – AsGoodAsItGets Jan 19 '22 at 16:40