如何根据内容设置单元格编辑器的高度？

Posted 2023-03-28

【中文标题】如何根据内容设置单元格编辑器的高度？

【英文标题】：How to set height of cell editor based on content?

【发布时间】：2021-07-04 02:41:08

【问题描述】：

我有这个带有 cellEditor agRichSelectCellEditor 的 ag-grid 表，我希望默认情况下将高度设置为与内容相同的大小。在所附图片中，我的agRichSelectCellEditor 底部有空间，我希望编辑器的大小与内容大小相同，并删除底部的空间。 有超过 4 个选项可以正常工作，并且底部没有空间。

 cellEditor: "agRichSelectCellEditor"

这似乎是 ag-grid 单元格编辑器 中的标准，如果您在 official doc 中的 cellEditor 示例中单击 male这里似乎也有空白空间（见下图）。这是 ag-grid 单元格编辑器文档的链接，其中包括具有相同“问题”的表格示例：Cell editing Ag-grid-angular documentation

Plunker 案例示例：Ag-grid agRichSelectCellEditor example

是否可以根据 ag-grid 中的内容大小修改默认最小高度？

【问题讨论】：

你能创建一个stackblitz example吗？

添加了ag-grid官方文档的链接，其中有相同案例的示例和源代码，

如果您提供 a stackblitz example 会非常好，因为您提供的链接中没有 TypeScript 示例

用 plunker 中的示例更新问题。

【参考方案1】：

以下样式应使列表的height 适合其内容的大小：

div.ag-rich-select .ag-rich-select-list 
    width: 100%;
    min-width: 200px;
    background-color: lightgreen;
    height: 100% !important;    

但是，样式不会被覆盖。看起来应该通过 it is described in the docs 或 by adding the above class 到 style.scss 文件之类的代码覆盖样式。