How to make textarea fit its parent element's height in NG-ZORRO?

Question

I'm using nz-input textarea in 'nz-form' form.

I don't know how to make textarea fit its parent's height.

Demo

Here is the status quo:

What I want is:

I know what the problem is

If I directly set style="height:100%" for the two div and textarea, then I can get the target. But, the two div actually are not on my component's template html. So, I do not know how to fix this issue. I've tried to override the 'ant-form-item-control-input-content' css class, but it did not work.

Answer 1

I also have this similar issue when using antd. My go to solution is always to use flexbox when I want to fit the remaining space of the parent height.

I could not give you an exact code sample from your code because the link that you provided is not editable, what I can give you is an example on how I did it by just editing it from the inspect element of the page.

Screenshot Output

First is change the display attribute of your form tag to flex, and set it's flex-direction to column.

Form

<form id="my-form">
  // nz-input elements
</form>

Style of form

form#my-form {
  display: flex;
  flex-direction: column;
}

Next, remove the height that you made on your 2nd nz-form-item (this contains the label content and textarea).

and also set the display of that element to flex and flex-direction: column, so we will be able to set the height: 100% properly with no issues on all the div elements inside including the textarea.

This style is for the 2nd nz-form-item inside the form element

element.style {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

I added a flex-grow: 1, because we want the 2nd nz-form-item to take the remaining space of the parent element which is the form element.

Note: Using height: 100% will copy the height of the form element, which we don't want that to happen and we'll not use this style.

Now, we want also to set flex-grow: 1; on the nz-form-control to take the remaining space of it's parent (which is the nz-form-item),

And lastly to directly set style="height:100%" for the two div and textarea, and we're done!

You can see the styles that I set starting from the nz-form-control down to the textarea

If you'll update the link on the post that is editable, I can give you a clear example how to do it. But for now, I can only give you this descriptive steps on how to fix your issue.

LAST EDIT

I've edited your code on stackblitz, you can have a look at the result in this link. :)

Credits also to Sameer, which helped me create this answer using ::ng-deep. I wasn't able to add styles on the 2 divs under the nz-form-item tag without it.

output