时间戳

首页 > 解决方案 > 如何在 agRichSelectCellEditor 中更改下拉列表的宽度

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

问题描述

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

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

有什么想法可以实现吗？

标签： angularag-grid

解决方案

注意：此答案使用纯 JavaScript，而不是 Angular。

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

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

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

然后将 a 添加cellRenderer到editorParams指定宽度的 中：

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

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

推荐阅读