css - 如何在 NG-ZORRO 中使 textarea 适合其父元素的高度？

Question

我正在使用nz-input'nz-form'形式的textarea。

我不知道如何使 textarea 适合其父级的高度。

演示

以下是现状：

我想要的是：

我知道问题是什么

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

标签： cssangularng-zorro-antd

Answer 1

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

我无法从您的代码中为您提供确切的代码示例，因为您提供的链接不可编辑，我可以给您的是一个示例，说明我是如何通过从inspect element页面中编辑它来做到这一点的。

截图输出

首先是将标签的display属性更改为，并将其设置为。formflexflex-directioncolumn

形式

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

形式风格

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

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

并将display该元素的 设置为flexand flex-direction: column，因此我们将能够height: 100%正确设置 ，而不会对div内部的所有元素（包括textarea.

此样式适用于元素nz-form-item内的第二个form

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

我添加了 a flex-grow: 1，因为我们希望 2ndnz-form-item占据元素的剩余空间，即parent元素form。

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

现在，我们还想设置它flex-grow: 1;的nz-form-control父级（即nz-form-item）的剩余空间，

最后直接设置style="height:100%"两个divand textarea，大功告成！

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

如果您要更新帖子上可编辑的链接，我可以为您提供一个清晰的示例。但是现在，我只能为您提供有关如何解决问题的描述性步骤。

最后编辑

我已经在 stackblitz 上编辑了您的代码，您可以在此链接中查看结果。:)

也归功于Sameer，这帮助我使用::ng-deep. 没有它，我无法在nz-form-item标签下的 2 个 div 上添加样式。

输出