search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.23k stars 6.7k forks source link

Sticky columns of a native mat-table inside a tab have sticky position always 0px #16074

Open IlCallo opened 5 years ago

IlCallo commented 5 years ago

What is the expected behavior?

Sticky position of sticky columns should be calculated rightfully always

What is the current behavior?

left property of sticky columns inside a native-based mat-table, when placed inside a mat-tab, is always 0px

What are the steps to reproduce?

https://angular-material2-issue-pahywc.stackblitz.io

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 7.2.15 Material: 7.3.7 OS: W10 TypeScript: 3.2.4 Browser: all

alexpetrus20 commented 4 years ago

I am trying to use the material table with 4 sticky columns, 2 of them to left and 2 of them to right. The problem is that the offset is calculated wrong by sticky and stickyEnd attributes from angular material. Does anyone have the same issue?

senorspielbergo commented 2 years ago

Yes, I have the exact same issue. How does ng calculate the offsets?

arajcok commented 2 years ago

I believe this is because of the fact that "By default, tab contents are eagerly loaded. Eagerly loaded tabs will initialize the child components but not inject them into the DOM until the tab is activated" (https://material.angular.io/components/tabs/overview#lazy-loading). This must mess up the left property calculation in some way. Using lazy loading on the tab with the table (matTabContent) solved this issue for me.