[data grid] Filter layout issue in datagrid

[kishanp1412]

The problem in depth

I have issue with mui filter layout in datagrid , i checked the documentation but i am not able to get the filter layout same as docs so need help to get the filter layout same as docs in data grid , you can see the attachments i am not getting the layout perfectly so please provide the solution to get the filter layout same as docs asap it's blocking our live website

Your environment

`npx @mui/envinfo`

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```Chrome

Search keywords: Datagrid filter layout Order ID: 88101

[michelengelen]

To help us diagnose the issue efficiently, could you provide a stripped-down reproduction test case using the latest version? A live example would be fantastic! ✨

For your convenience, our documentation offers templates and guides on creating targeted examples: Support - Bug reproduction

Just a friendly reminder: clean, functional code with minimal dependencies is most helpful. Complex code can make it tougher to pinpoint the exact issue. Sometimes, simply going through the process of creating a minimal reproduction can even clarify the problem itself!

Thanks for your understanding! 🙇🏼

[kishanp1412]

okay will check and get back to you

[kishanp1412]

still not able to get the filter layout const columns:

const columns: GridColDef[] = useMemo(
  () => [
    {
      headerName: "ID",
      field: "id",
      flex: 0.5, 
    },
    {
      headerName: "Quote To",
      field: "supplier_name",
      flex: 1,
      editable: true,
    },
  ],
  [],
)

<DataGridPro
  columns={columns}
  rows={rows}
  rowHeight={38}
  checkboxSelection
  disableRowSelectionOnClick
/>

created again with simplest listing but still i am getting this filter layout

[kishanp1412]

"@mui/icons-material": "5.11.16", "@mui/material": "5.12.2", "@mui/x-data-grid-premium": "^7.1.1", "@mui/x-data-grid-pro": "6.9.0", "@mui/x-date-pickers": "5.0.20", "formik": "2.2.9", "formik-mui": "4.0.0", "formik-mui-x-date-pickers": "0.0.1", "react": "18.2.0", version of mui

[michelengelen]

Please try to replicate this in a codesandbox or stackblitz. Without this we will not be able to help you.

[kishanp1412]

okay will do it

[kishanp1412]

it can be possible the layout is not perfect due to this:

"@mui/icons-material": "5.11.16",
"@mui/material": "5.12.2",
"@mui/x-data-grid-premium": "^7.1.1",
"@mui/x-data-grid-pro": "6.9.0",
"@mui/x-date-pickers": "5.0.20",
"formik": "2.2.9",
"formik-mui": "4.0.0",
"formik-mui-x-date-pickers": "0.0.1",
"react": "18.2.0",

versions as i have created test project in my system with latest versions of mui datagrid and it's working fine

[michelengelen]

Thats relatively unlikely. It works with the same versions installed in a codesandbox:

From the screenshot you provided my guess would be that there are some style overrides present in your project that affect the filter panel.

The best option here is to track down where the CSS changes come from.

[kishanp1412]

got it will check , thanks for your support

[github-actions[bot]]

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@kishanp1412: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.