React-data-grid: What's the best way to disable the horizontal scrollbar?

[kaiyoma]

Which version of React JS are you using?

✅ Officially supported ✅

• [ ] v15.4.x

⚠️ Not officially supported, expect warnings ⚠️

• [ ] v15.5.x
• [ ] v15.6.x

☣️ Not officially supported, expect warnings and errors ☣️

• [x] v16.x.x

---

Which browser are you using?

✅ Officially supported ✅

• [ ] IE 9 / IE 10 / IE 11
• [ ] Edge
• [x] Chrome

⚠️ Not officially supported, but "should work" ⚠️

• [ ] Firefox
• [ ] Safari

---

I'm submitting a ...

• [x] 🐛 Bug Report
• [ ] 💡 Feature Request

👋 Need general support? Not sure about how to use React itself, or how to get started with the Grid?
Please do not submit support request here. Instead see

https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md

---

Issue Details

What is the proper way to disable the horizontal scrollbar? I'm seeing an issue where Chrome is showing the scrollbar for no good reason (there's plenty of room for all the data), but all the other browsers (IE, Edge, Firefox) correctly have it hidden.

I'm currently working around this with some hacky CSS in my LESS file:

    .react-grid-Container {
      .react-grid-Main {
        .react-grid-Grid {
          .react-grid-Canvas {
            overflow-x: hidden !important;
          }
        }
      }
    }

(The !important is necessary because overflow-x: auto is being applied as an inline style for some reason by data grid.) However, I would like to not do this if possible. Any suggestions?

[jpdriver]

hey @kaiyoma -- how wide is your grid and how wide are each of your columns?

[kaiyoma]

I haven't specified any values for either; I'm letting the component do its thing while I specify the bare minimum:

<ReactDataGrid
  columns={COLUMNS}
  rowGetter={i => this.tableData[i]}
  rowsCount={this.tableData.length}
  minHeight={100}
/>

[jpdriver]

By default the Grid will try and divide the total width equally amongst the number of columns, until the column widths would be below a minColumnWidth (in px) -- beyond which we automatically scroll horizontally.

How many columns do you have?

You can try setting a custom value for minColumnWidth by passing it as a prop to <ReactDataGrid />

[kaiyoma]

I have only three columns for a small amount of data and plenty of extra space, so I don't think this is the issue.

[kaiyoma]

Magically, this problem has gone away on its own! Let's leave this issue open for now as I continue to play around with react-data-grid and throw more data/options at it. If I don't see this issue anymore, I'll close it. Don't worry about following up for now.

[kaiyoma]

Never mind, it's happening again after I added another column. The column widths and the overall width seem to be calculated correctly (when I inspect the DOM), but I think maybe it's off by 1 pixel somewhere or the vertical scrollbar is taking up slightly too much room and causing the horizontal scrollbar to appear.

This is confirmed by the fact that if I change the width of my browser window, the horizontal scrollbar sometimes appears and sometimes doesn't, almost with a 50-50 chance, indicating something similar to an off-by-one-pixel problem.

In any case, it would be nice to forcibly disable horizontal scrolling (which is terrible anyway). What do you suggest is the best way of going about that?

As an aside, maybe you guys can consider using something like this in the future:

https://github.com/goldenyz/react-perfect-scrollbar

It would replace the native OS scrollbars and provide a more consistent experience across browsers. We use it in our project and it's great.

[kaiyoma]

Here's a screencast showing the problem: https://youtu.be/kdb9AKIwkwc

I've intentionally made the text white to hide sensitive information, which is why the cells appear empty. You can see that as I change the browser width, the horizontal scrollbar randomly appears and disappears.

[diogofcunha]

Hi @kaiyoma.

This looks like a bug, will require some investigation as window resizing operations are not trivial.

In the meantime have you tried to force a re-render on the grid component on resize? That may work

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please reopen this if you feel it has been incorrectly closed and we will do our best to look into it. Thank you for your contributions.