Demo Filters vs. Community Filters - filter

Question

I am new to working with ag-grid. I am working through some of the documentation, and ran across something I am unclear on. In the Column Filtering section, I see the examples, and I put together some code that I believe duplicates what is done in the example. The code works, and I can filter, but the filter popup I see is not the same as what I see in the examples on the page. Specifically, I see a filter that has a text entry area, and, once text has been entered, an area that shows And/Or buttons (with the buttons on top of the text) and a second text entry area. In the examples in the documentation, I see clear popups with a dropdown starting with "Contains" (and having other options) and a text entry area below. What am I doing wrongly/missing? Is this expected behavior?
My column defs look like:
var columnDefs = [
{headerName: "Title", field: "title"},
{headerName: "Alias", field: "alias"}
];
And my grid options are:
var gridOptions = {
columnDefs: columnDefs,
enableSorting: true,
enableFilter: true,
enableColResize:true,
rowSelection:'single',
rowDeselection:true,
onRowSelected: onRowSelected,
onSelectionChanged: onSelectionChanged
};
I am getting the rows from fetch, so rowData is not defined.
The images (first is the one I see in the demo, the second is what I see in my app):
The filter I see in the demo app
The filter I see in my app

Answer 1

From the comments:
I see your screenshots, and I don't have a clue what's happening. At a
guess, I would say you have some strange CSS that's affecting the
ag-grid filter. Try temporarily removing all CSS that isn't native to
ag-grid. If you need more help, you'll have to provide a demo that
reproduces the problem.
It seems that materialize.css was the source of the problem:
#thirtydot spot on. the "select" elements had been undisplayed in some
other css, and the inputs had been resized. The culprit here seems to be materialize.css.
You probably need some CSS like this:
.ag-root-wrapper select {
display: inline-block !important; /* might not need !important */
/* and any other needed CSS to make selects display normally */
}