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

Question

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

我试图做出指令，但这并不是真正的结论......

有什么想法可以实现吗？

Answer 1

注意:这个答案使用普通的 javascript，而不是 angular。

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

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

(这是“balham”主题 - .ag-theme-balham，根据需要更改)

然后添加一个 cellRenderer到 editorParams指定宽度:

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

注意:由于 css 覆盖，你需要为 提供一个 cellRenderer全部 您的 agRichSelectCellEditors - 否则编辑器会因 width: auto 而变得太窄.