I have implemented a table, which is very wide (much wider than the screen), and the user can scroll horizontally.
At the far left, is a task-row
component which has an element with a “sticky” header (.task-row_main class), which doesnt move when scrolling horizontally, by using the css `position: sticky .
.task-row_main {
display: flex;
align-items: center;
max-width: 230px;
flex-shrink: 1;
flex-grow: 1;
position: -webkit-sticky;
position: sticky;
left: 1px;
}
When I add my task-row
component into ion-item
, the sticky header breaks, and I cannot figure out how to get around this.
<ion-item>
<task-row>
</task-row>
</ion-item>
How do I make it so that position: sticky
works for element inside an <ion-item>
?