NG-ZORRO中如何让textarea适配其父元素的高度？

Question

我在 'nz-form' 表单中使用 nz-input textarea。

我不知道如何让 textarea 适合其父项的高度。

这是现状：

我想要的是：

我知道问题出在哪里

如果我直接给div和textarea这两个设置style="height:100%"，就可以得到目标了。但是，这两个 div 实际上不在我的组件模板 html 上。所以，我不知道如何解决这个问题。我试图覆盖 'ant-form-item-control-input-content' css class，但它没有用。

Answer 1

我在使用antd的时候也遇到了类似的问题。当我想适应父身高的剩余 space 时，我的解决方案总是使用 flexbox。

我不能从你的代码中给你一个准确的代码示例，因为你提供的 link 是不可编辑的，我可以给你的是一个例子，说明我是如何通过从inspect element 页数。

屏幕截图输出

首先是将 form 标记的 display 属性更改为 flex，并将其 flex-direction 设置为 column。

表格

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

表单样式

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

接下来， 删除您在第 2 个 nz-form-item 上创建的 height（其中包含标签内容和文本区域）。

并将该元素的 display 设置为 flex 和 flex-direction: column，因此我们将能够正确设置 height: 100% 而不会出现所有问题div 里面的元素包括 textarea。

此样式适用于 form 元素中的第 2 个 nz-form-item

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

我添加了一个flex-grow: 1，因为我们希望第2个nz-form-item取parent元素的剩余space，即form元素.

注意： 使用 height: 100% 将复制 form 元素的高度，我们不希望这种情况发生，我们也不会使用这种风格。

现在， 我们还想在 nz-form-control 上设置 flex-grow: 1; 以获取其父级的剩余 space（即nz-form-item),

最后直接给div和textarea两个设置style="height:100%"，就大功告成了！

你可以看到我设置的样式从nz-form-control开始到textarea

如果您要更新可编辑的 post 上的 link，我可以为您提供一个清楚的示例，说明如何操作。但目前，我只能为您提供有关如何解决问题的描述性步骤。

上次编辑

我已经在 stackblitz 上编辑了你的代码，你可以看看结果 in this link. :)

也感谢 Sameer，它帮助我使用 ::ng-deep 创建了这个答案。没有它，我无法在 nz-form-item 标签下的 2 个 div 上添加样式。

输出

Answer 2

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.

那么，当您尝试覆盖 css 时，您是否只覆盖了 .ant-form-item-control-input-content？还是您也覆盖了 .ant-form-item-control-input？你说当 div 和 textarea 的高度都为 100% 时它起作用但只说你覆盖了 CSS.

中的一个 div

Answer 3

看看是否有帮助，将 full-textarea class 添加到 nz-form-control 的 textarea 和以下 CSS 到您各自组件的 CSS 文件中。

.full-textarea ::ng-deep .ant-form-item-control-input {
  height: calc(100% - 110px);
}
.full-textarea ::ng-deep .ant-form-item-control-input-content {
  height: 100%;
}
.full-textarea textarea {
  height: 100%;
}

NG-ZORRO中如何让textarea适配其父元素的高度？

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

css

angular

ng-zorro-antd