position: sticky doesn't work for element inside <ion-item>

Question

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 doesn't 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. Scrolling horizontally causes the sticky header to scroll off screen.

<ion-item>
    <task-row>
    </task-row>
</ion-item>

But when I dont wrap it in an ion-item, it works:

<task-row>
</task-row>

How do I make it so that position: sticky works for element inside an <ion-item>?

Answer 1

Try this may be this can fix your problem, if you will take left:0px and right:0px; then it will take 100% width.

.ion-item{
  position:relative;
}
.task-row {
    position: sticky;
    left:1px;
    top: 0px;
    right:0px
}