Infinite horizontal scroll with fixed columns

[chriddyp]

See example in https://dash.plotly.com/datatable/width

(Firefox)

This is an issue in dash 1.12.0 & 1.13.0. Not sure about earlier versions.

[mclarty3]

Hi, I'm facing this same issue with Dash 2 (also only in Firefox, Chrome works fine). Has there been any progress on investigating this? Trying to get around it with CSS styling but having some trouble.

[mclarty3]

Just to follow up, I did find a CSS workaround, although it's not super ideal. I removed the fixed column, then manually set each cell in column 0 to sticky. To get a border for the column, I added a ::before and an ::after pseudo-element to each cell in column 0 and gave it a border.

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.dash-cell.column-0,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-header.column-0 {
    background-color: white !important;
    position: sticky;
    left: 0;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-header.column-0::before,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-header.column-0::after,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.dash-cell.column-0::before,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td.dash-cell.column-0::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-right: 1px solid #EEEEF1;
}

[jpaye]

Following up--faced this issue as well in Dash 2. Above CSS did work as a workaround, but would love an upstream fix!

[ZhiziWen]

I am also still facing this issue, is there any follow-up with it? My dash version is 2.6.1, both chrome and edge doesn't work