如何更改 agRichSelectCellEditor 中下拉列表的宽度

Question

我正在使用 agRichSelectCellEditorcomponent 并且我有带有长标签的选择选项。我想更改下拉列表的宽度，但我看到它的.ag-rich-select-list宽度为 200 像素。我可以增加这个宽度，但我希望根据我的选项宽度有一个动态宽度，但这些选项处于绝对位置。

我试图制定一个指令，但这并不是真正的结论......

有什么想法可以实现这一目标吗？

Answer 1

注意：这个答案使用普通的 JavaScript，而不是 Angular。

您可以通过覆盖列表的宽度来做到这一点（以删除 200px 限制）：

.ag-theme-balham .ag-rich-select .ag-rich-select-list {
  width: auto !important;
}

（这是针对“balham”主题的 - .ag-theme-balham，根据需要更改）

然后添加 acellRenderer来editorParams指定宽度：

cellEditorParams = {
   values: values,
   cellRenderer: function cellRenderer(params) {
     return `<div style="display:inline-block;width:400px;">${params.value || ''}</div>`;
   },
};

注意：由于 css 覆盖，您需要为所有agRichSelectCellEditors 提供一个 cellRenderer - 否则编辑器将变得太窄width: auto。