angular / angular/components

Sticky columns are not correctly positionned when there are 2 sticky columns on the left

Open
#18,002 4 comments 3 reactions 0 assignees View on GitHub
area: cdk/table P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Reproduction

[Reproduced on stackblitz](https://stackblitz.com/edit/components-issue-8ut7gg)

Steps to reproduce:
1. Define a mat-table with 2 sticky columns on the left
2. Use the horizontal scrollbar
3. Position of the second column is not correctly computed

#### Expected Behavior

What behavior were you expecting to see?

Two sticky columns, correctly positioned and not moving when using the horizontal scrollbar.

#### Actual Behavior

What behavior did you actually see?

1. Sometimes, the second sticky column is actually moving when using the horizontal scrollbar (see the 3rd example on my stackblitz)
2. Sometimes the second sticky column is sticky, but not correctly positioned (see the 2nd example on my stackblitz: this column is too far on the right).

#### Environment

- Angular: 7, 8
- CDK/Material: 7, 8
- Browser(s): Firefox 71.0, Chromium 75.0.3770.142
- Operating System: Windows 10, Ubuntu 18.04

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and the Angular Material mat-table sticky-column behavior, focusing on two left sticky columns during horizontal scrolling. Compare the second-column position in the reported examples and verify the result across the listed Firefox and Chromium environments. Done means both sticky columns remain fixed and the second column is correctly positioned.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.