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

Question

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

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

有什么想法可以实现？

Answer 1

注意：此答案使用普通的javascript，而不是有角的。

您可以通过覆盖列表的宽度来做到这一点（以消除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的覆盖，您需要为agRichSelectCellEditors的 all 提供一个cellRenderer-否则，width: auto的编辑器太狭窄了。