NonePosition : sticky не работает для элемента внутри <ion-item> [ionic]

Question

Я реализовал таблицу, которая очень широка (намного шире экрана), и пользователь может прокручивать ее горизонтально.

Слева внизу находится компонент строки задачи, в котором есть элемент с "липким" заголовком (класс.task-row_main), который не перемещается при горизонтальной прокрутке с помощью 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;
}

Когда я добавляю свой компонент строки задачи в ion-itemЛипкий заголовок ломается. Прокрутка по горизонтали приводит к тому, что липкий заголовок прокручивается за пределы экрана.

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

Но когда я не завернуть его в ion-item, оно работает:

<task-row>
</task-row>

Как мне сделать так, чтобы позиция: липкий работал для элемента внутри <ion-item>?

Answer 1

Попробуйте это может быть, это может решить вашу проблему, если вы возьмете влево:0px и вправо:0px; тогда это займет 100% ширины.

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