演示过滤器与社区过滤器

Question

我是使用 ag-grid 的新手。我正在阅读一些文档，并遇到了一些我不清楚的东西。在 Column Filtering 部分，我看到了示例，并将一些我认为与示例中所做的重复的代码放在一起。该代码有效，并且我可以过滤，但是我看到的过滤器弹出窗口与我在页面上的示例中看到的不一样。具体来说，我看到一个具有文本输入区域的过滤器，一旦输入了文本，就会出现一个显示和/或按钮（按钮位于文本顶部）和第二个文本输入区域的区域。在文档中的示例中，我看到清晰的弹出窗口，其中包含以“包含”（以及其他选项）开头的下拉菜单和下面的文本输入区域。我做错了什么/错过了什么？这是预期的行为吗？ 我的列定义如下：

var columnDefs = [
{headerName: "Title", field: "title"},
{headerName: "Alias", field: "alias"}
];

我的网格选项是：

var gridOptions = {
columnDefs: columnDefs,
enableSorting: true,
enableFilter: true,
enableColResize:true,
rowSelection:'single',
rowDeselection:true,
onRowSelected: onRowSelected,
onSelectionChanged: onSelectionChanged
};

我从 fetch 中获取行，所以 rowData 没有定义。

图片（第一个是我在演示中看到的，第二个是我在我的应用中看到的）：

我在演示应用中看到的过滤器

我在应用中看到的过滤器

Answer 1

来自cmets：

我看到了你的截图，但我不知道发生了什么。在一个 猜，我会说你有一些奇怪的 CSS 会影响 ag网格过滤器。尝试暂时删除所有非原生 CSS 农业网格。如果您需要更多帮助，您必须提供一个演示 重现问题。

看来materialize.css 是问题的根源：

@thirtydot 恰到好处。 “选择”元素在某些情况下未显示 其他 css，并且输入已调整大小。这里的罪魁祸首似乎是materialize.css。

你可能需要一些这样的 CSS：

.ag-root-wrapper select {
    display: inline-block !important; /* might not need !important */
    /* and any other needed CSS to make selects display normally */
}