search

gregnb / mui-datatables

Datatables for React using Material-UI
MIT License
2.71k stars 932 forks source link

Row selection checkboxes overlap text #1083

Open GuyShaanan opened 4 years ago

GuyShaanan commented 4 years ago

Since 2.10.0 (seems like) the row selection checkboxes are overlapping the text when you scroll horizontally.

Expected Behavior

Checkboxes shouldn't overlap the text when you scroll horizontally.

Current Behavior

Steps to Reproduce (for bugs)

  1. Use basic demo (with version 2.13.0)
  2. Shrink the window so a horizontal scroll bar is shown.
  3. Scroll horizontally.
  4. Notice the checkbox overlaps the text.

image

(with version 2.9.0 and responsive: 'scroll' the feature works fine)

Your Environment

Tech Version
Material-UI 3.3.2
MUI-datatables 2.13.0
React 16.4
browser Chrome 78
gabrielliwerant commented 4 years ago

There is a potential fix for this here https://github.com/gregnb/mui-datatables/pull/1075.

patorjk commented 4 years ago

I included a fix for this in https://github.com/gregnb/mui-datatables/pull/1088

I'm not completely sure what https://github.com/gregnb/mui-datatables/pull/1075 is fixing, but it won't completely fix the issue described here because it sets the cell background to white, which means the select cell won't have a hover color nor will it be colored correctly when the row is selected. This will lead to selected rows and rows you hover over looking strange (since the checkbox cell will remain white).

gsandorx commented 3 years ago

The problem is that somehow, the checkbox on the header gets a background-color prop (set to white if you have a light theme). But the body row checkboxes don't get that style, thus you see the overlap.

I added this patch via a style override and it worked.

MUIDataTableSelectCell: {
            root: {
                backgroundColor: "#FFF",
            },
        },

This style prop has to be enforced for body row checkboxes.

image