search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.54k stars 1.32k forks source link

[data grid] Filtering is broken on mobile #883

Open oliviertassinari opened 3 years ago

oliviertassinari commented 3 years ago

Current Behavior 😯

Capture d’écran 2021-01-20 aΜ€ 00 53 14

Expected Behavior πŸ€”

Steps to Reproduce πŸ•Ή

Steps:

  1. Open https://master--material-ui-x.netlify.app/components/data-grid/

Your Environment 🌎

@material-ui/data-grid@v4.0.0-alpha.17

ndo28 commented 2 years ago

Using version 4.0.0.

I am facing this issue, but don't want to fully override FilterPanel in order to adjust some simple styling. I am overriding styles in createTheme to prevent the page overflow, and instead let the popover scroll horizontally:

const theme = createTheme({
  ...
  overrides: {
    MuiGridPanel: {
      root: {
        marginLeft: 8,
      },
      paper: {
        maxWidth: '99vw',
        overflowX: 'auto',
    },
  },
  ...
});

This obviously applies to all MuiGridPanel instances, which is my main concern with the solution, but I have yet to find any negative side effects.

Note: The left-margin isn't necessary, but works nicely to somewhat center the popover on small screens.

@oliviertassinari would a scrolling popover be considered viable for a mobile solution?