演示过滤器与社区过滤器

Question

我是刚开始用ag网格工作的。我正在浏览一些文档，并偶然发现了一些我不清楚的地方。在列过滤部分中，我看到了示例，并将一些我认为重复了示例中所做工作的代码放在一起。代码工作，我可以过滤，但我看到的过滤器弹出与我在页面上看到的例子不一样。具体来说，我看到一个过滤器，它有一个文本输入区域，并且，一旦输入了文本，就会看到一个显示和/或按钮(按钮位于文本顶部)的区域和一个第二个文本输入区域。在文档中的示例中，我看到了一个明显的弹出窗口，下拉菜单以"Contains“(并具有其他选项)和下面的文本输入区域开头。我做错了什么？这是预期的行为吗？我的专栏看起来像是：

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

从评论中：

我看到你的截图了，我不知道发生了什么。在猜测中，我会说你有一些奇怪的CSS正在影响ag网格过滤器。尝试暂时删除所有不属于ag网格的CSS。如果您需要更多的帮助，您将不得不提供一个再现问题的演示。

materialize.css似乎是问题的根源：

@三十点点。"select“元素在其他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 */
}