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

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

0 голосов
/ 27 июня 2019

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

В крайнем левом углу находится компонент строки задачи, в котором есть элемент с«липкий» заголовок (класс .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>?

1 Ответ

1 голос
/ 27 июня 2019

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

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