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.

Sign up for GitHub

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

Jump to bottom

[material-ui][Table] Scrollbar extends into header when using stickyHeader on Table component #34416

Open
2 tasks done
ffanizzanvisia opened this issue Sep 21, 2022 · 8 comments · May be fixed by #45056
Open
2 tasks done

[material-ui][Table] Scrollbar extends into header when using stickyHeader on Table component #34416

ffanizzanvisia opened this issue Sep 21, 2022 · 8 comments · May be fixed by #45056
Assignees
@siriwatknp @zanivan @danilo-leal
Labels
component: table This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material ready to take Help wanted. Guidance available. There is a high chance the change will be accepted support: question Community support but can be turned into an improvement
Milestone
Material UI v8 (d...

Comments

@ffanizzanvisia
Copy link

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Steps to reproduce 🕹

Steps:

  1. Have an implementation of a Table using the stickyHeader prop, and sufficient rows to make a scrollbar appear (ex: https://mui.com/material-ui/react-table/#sticky-header)
  2. Note that the scrollbar extends into the header:

image

Current behavior 😯

The scrollbar extends into the header

Expected behavior 🤔

The scrollbar should stop at the top edge of the top row of the table

Context 🔦

Have a UX that is consistent for end users

Your environment 🌎

npx @mui/envinfo 

  System:
    OS: Windows 10 10.0.22000
  Binaries:
    Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.18 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.22000.120.0), Chromium (105.0.1343.42)
  npmPackages:
    @emotion/react: ^11.7.1 => 11.8.2
    @emotion/styled: ^11.6.0 => 11.8.1
    @mui/base:  5.0.0-alpha.72
    @mui/icons-material: ^5.8.4 => 5.8.4
    @mui/lab: ^5.0.0-alpha.69 => 5.0.0-alpha.73
    @mui/material: ^5.2.5 => 5.5.1
    @mui/private-theming:  5.4.4
    @mui/styled-engine:  5.4.4
    @mui/system:  5.5.1
    @mui/types:  7.1.4
    @mui/utils:  5.4.4
    @mui/x-data-grid:  5.6.1
    @mui/x-data-grid-pro: ^5.5.1 => 5.6.1
    @mui/x-license-pro:  5.6.1
    @types/react: ^17.0.24 => 17.0.40
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript: ~4.4.3 => 4.4.4

I tested this in Chrome and Firefox with the same results
@ffanizzanvisia ffanizzanvisia added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 21, 2022
@ZeeshanTamboli ZeeshanTamboli added the component: table This is the name of the generic UI component, not the React module! label Sep 23, 2022
@siriwatknp siriwatknp added support: question Community support but can be turned into an improvement and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Dec 19, 2022
@ZeeshanTamboli ZeeshanTamboli mentioned this issue Feb 6, 2024
Closed
@ZeeshanTamboli ZeeshanTamboli changed the title Scrollbar extends into header when using stickyheader on Table component [material-ui][Table] Scrollbar extends into header when using stickyheader on Table component Feb 6, 2024
@ZeeshanTamboli ZeeshanTamboli changed the title [material-ui][Table] Scrollbar extends into header when using stickyheader on Table component [material-ui][Table] Scrollbar extends into header when using stickyHeader on Table component Feb 6, 2024
@ZeeshanTamboli ZeeshanTamboli added the package: material-ui Specific to @mui/material label Feb 6, 2024
@ZeeshanTamboli
Copy link
Member

Tagging @danilo-leal and @zanivan since it is a UI/UX decision-related issue. Also, there was a recent duplicate issue: #40770.

@zanivan
Copy link
Contributor

zanivan commented Feb 7, 2024

Even though there's a technical reason behind why the scroll bar shows up over the sticky header, it doesn't really make sense for it to be like that from a UX standpoint. The scroll bar should only pop up in parts that actually scroll. Having it everywhere can confuse users, making them think they can scroll where they can't.

Tagging @siriwatknp since you're this component's owner.

@tinoue
Copy link

tinoue commented Mar 25, 2024

Is there any workaround for this issue ?

@ewarrenG
Copy link

+1

@zanivan
Copy link
Contributor

zanivan commented Apr 16, 2024

@DiegoAndai should we include this for v6?

@DiegoAndai
Copy link
Member

DiegoAndai commented Apr 24, 2024 •
edited
Loading

@zanivan I don't think this would need braking changes, so I wouldn't "pin it" to v6. I'll add the ready to take label to see if we get any interested contributors.

For anyone interested in taking this, we should investigate the cause and propose a solution. Feel free to open a PR and add me as a reviewer. The expected outcome is that the scroll bar should only pop up in parts that actually scroll.

@DiegoAndai DiegoAndai added the ready to take Help wanted. Guidance available. There is a high chance the change will be accepted label Apr 24, 2024
@umarmunirpl
Copy link

Are there any updates on this?

@DiegoAndai DiegoAndai added this to the Material UI v8 (draft) milestone Oct 4, 2024
@DiegoAndai
Copy link
Member

Hey @umarmunirpl, thanks for reaching out. I have no updates, but the issue is ready to take in case you wish to work on it. I would be happy to guide you.

@MachaVivek MachaVivek linked a pull request Jan 19, 2025 that will close this issue
Open
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@siriwatknp siriwatknp

@zanivan zanivan

@danilo-leal danilo-leal

Labels
component: table This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material ready to take Help wanted. Guidance available. There is a high chance the change will be accepted support: question Community support but can be turned into an improvement
Projects
None yet
Milestone
Material UI v8 (draft)
9 participants
@tinoue @DiegoAndai @ewarrenG @siriwatknp @ZeeshanTamboli @zanivan @danilo-leal @ffanizzanvisia @umarmunirpl