Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[XGrid] Header is broken after reordering and horizontal scrolling #2148

Closed
2 tasks done
mindtraveller opened this issue Jul 14, 2021 · 4 comments
Closed
2 tasks done
Labels
duplicate This issue or pull request already exists

Comments

@mindtraveller
Copy link

mindtraveller commented Jul 14, 2021

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The header is broken after a column is reordered and table horizontally scrolled

Expected Behavior 🤔

The header should be displayed correctly.

Steps to Reproduce 🕹

Steps:

  1. Scroll table to the right
  2. Reorder any column
  3. Scroll to the left
  4. Scroll to the right -- now the header is broken

Live example:
Jul-14-2021 18-07-28

You can check it yourself in this example: https://material-ui.com/components/data-grid/columns/#column-reorder

Context 🔦

Your Environment 🌎

`npx @material-ui/envinfo`
 System:
    OS: macOS 11.4
  Binaries:
    Node: 14.15.3 - ~/.asdf/installs/nodejs/14.15.3/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.14.9 - ~/.asdf/installs/nodejs/14.15.3/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Edge: Not Found
    Firefox: 87.0
    Safari: 14.1.1
  npmPackages:
    @material-ui/core: 4.11.1 => 4.11.1 
    @material-ui/icons: 4.5.1 => 4.5.1 
    @material-ui/lab: 4.0.0-alpha.56 => 4.0.0-alpha.56 
    @material-ui/pickers: 3.1.2 => 3.1.2 
    @material-ui/styles: 4.11.1 => 4.11.1 
    @material-ui/system:  4.11.3 
    @material-ui/types:  5.1.0 
    @material-ui/utils:  4.11.2 
    @types/react:  17.0.0 
    react: 16.12.0 => 16.12.0 
    react-dom: 16.12.0 => 16.12.0 
    typescript: 4.2.3 => 4.2.3 

  Browser:
    Google Chrome Version 91.0.4472.114

Order id 💳

@mindtraveller mindtraveller added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jul 14, 2021
@dtassone dtassone added bug 🐛 Something doesn't work priority: important This change can make a difference and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jul 14, 2021
@dtassone
Copy link
Member

You can downgrade the grid to version 4.0.0-alpha.30.

This bug is present in version 4.0.0-alpha.31 onwards atm.

@m4theushw
Copy link
Member

Duplicate of #2132

@m4theushw m4theushw marked this as a duplicate of #2132 Jul 15, 2021
@github-actions github-actions bot added the duplicate This issue or pull request already exists label Jul 15, 2021
@mindtraveller
Copy link
Author

You can downgrade the grid to version 4.0.0-alpha.30.

This bug is present in version 4.0.0-alpha.31 onwards atm.

latest version has feature that we need, so downgrading is not an option

@m4theushw
Copy link
Member

You can try a workaround by preventing the .MuiDataGrid-columnsContainer div from scrolling. This is the fix proposed in #2154 for this bug.

@oliviertassinari oliviertassinari added components: XGrid and removed bug 🐛 Something doesn't work priority: important This change can make a difference labels Jul 16, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
duplicate This issue or pull request already exists
Projects
None yet
Development

No branches or pull requests

4 participants