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

(Chrome) Scrollbar not working when parent/grandparent's scrollbar is visible #3467

Open
holospice18 opened this issue Mar 4, 2024 · 0 comments
Open

(Chrome) Scrollbar not working when parent/grandparent's scrollbar is visible #3467

holospice18 opened this issue Mar 4, 2024 · 0 comments
Labels
Bug

Comments

@holospice18
Copy link

holospice18 commented Mar 4, 2024 •
edited
Loading

Describe the bug

DataGrid's scrollbar is not dragable.

I'm working on a page with title bar and sub-window.
In my real use case is that almost half of the viewport is available for DataGrid and I need multiple of it so it will need scrollbar.

The code below is the simplified version.

To Reproduce

  1. Create parent 'div' with height of '100vh'
  2. Add 'DataGrid' child with height greater than viewport to enable scrollbar

Link to code example:

        <body>
            <div style={{color: "white", backgroundColor: "#132132", height: "60px"}}>
                Title bar
            </div>
            <div id="subWindow" style={{height: "calc(100vh - 60px)", overflow: "auto"}}> 
              {/* calculate reamaining viewport space (minus title bar height)*/}
              {/* scroll bar should be on "subWindow" only*/}
                <div style={{height: "500px", padding: "10px"}}>
                    <DataGrid
                        columns={columns}
                        rows={rows}
                        style={{blockSize: "100%"}}
                    />
                </div>
                <br/>
                <div style={{height: "500px", padding: "10px"}}>
                    <DataGrid
                        columns={columns}
                        rows={rows}
                        style={{blockSize: "100%"}}
                    />
                </div>
            </div>
        </body>

Expected behavior

It works fine on Firefox.
Only happens when the parent/grandparent's scrollbar is visible

Environment

  • react-data-grid version: 7.0.0-beta.36
  • react/react-dom version: 18.2.0
@holospice18 holospice18 added the Bug label Mar 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@holospice18