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

[data grid] Removing autoHeight causes visual bugs when using overflow hidden #16009

Closed
willramosdev opened this issue Dec 27, 2024 · 3 comments
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! feature: Column pinning Related to the data grid Column pinning feature status: waiting for author Issue with insufficient information

Comments

@willramosdev
Copy link

willramosdev commented Dec 27, 2024

Related Page

React Data Grid Layout Documentation


Issue Type

Bug Report


Description

Following the instructions to remove autoHeight causes a visual bug when scrolling the UI. The issue manifests as follows:

  1. Before interaction: A visual bug appears during scrolling:

    image

  2. After interaction: The issue resolves itself when the cursor moves or a click is performed anywhere:

    image


Context

The issue occurs under the following conditions:

  • Pinned columns are used on the right.
  • The parent container has overflow: hidden applied.

Sample code to reproduce the issue:

<div
  style={{
    display: 'flex',
    flexDirection: 'column',
    height: '100%',
    overflow: 'hidden'
  }}>
  <DataGrid
    sx={gidSx}
    classes={gridClasses}
    rows={rows}
    columns={columns}
    className='rounded-none bg-white shadow-none'
    getRowId={getRowId}
    sortingOrder={['desc', 'asc']}
    pageSizeOptions={[25, 50, 100]}
    loading={isLoading}
    pagination={!isLoading}
    paginationMode='server'
    sortingMode='server'
    rowCount={rowCount}
    pinnedColumns={pinnedColumns}
    disableColumnReorder
    disableColumnSelector
    disableColumnMenu
    onRowClick={onRowClick}
    {...restProps}
  />
</div>

Additional Details

  • Bug Trigger: Using pinned columns on the right combined with overflow: hidden in the parent container.

  • Visual Demonstration:

    datagrid-bug


Search Keywords

autoHeight, DataGrid, pinned columns, overflow hidden

@willramosdev willramosdev added status: waiting for maintainer These issues haven't been looked at yet by a maintainer support: docs-feedback Feedback from documentation page labels Dec 27, 2024
@willramosdev
Copy link
Author

when using autoHeight works fine

@oliviertassinari oliviertassinari added the component: data grid This is the name of the generic UI component, not the React module! label Dec 28, 2024
@oliviertassinari oliviertassinari changed the title Removing autoHeight causes visual bugs when using overflow hidden [data grid] Removing autoHeight causes visual bugs when using overflow hidden Dec 28, 2024
@michelengelen
Copy link
Member

Hey @willramosdev could you create a minimal reproduction in a live sandbox? I am not able to reproduce the visual bug in my local environment. You can use this codesandbox as a starting point: DEMO

Could you share which version of the grid you are using?

@michelengelen michelengelen added status: waiting for author Issue with insufficient information feature: Column pinning Related to the data grid Column pinning feature bug 🐛 Something doesn't work and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer support: docs-feedback Feedback from documentation page labels Jan 2, 2025
Copy link

github-actions bot commented Jan 9, 2025

The issue has been inactive for 7 days and has been automatically closed.

@github-actions github-actions bot closed this as completed Jan 9, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! feature: Column pinning Related to the data grid Column pinning feature status: waiting for author Issue with insufficient information
Projects
None yet
Development

No branches or pull requests

3 participants