Как прокрутить содержимое ионной карты без установки высоты родительского - PullRequest
Новая
       15

Как прокрутить содержимое ионной карты без установки высоты родительского

0 голосов
/ 03 мая 2019

У меня проблема со свитком в ионном 4 и угловом 7.

У меня есть следующая структура: 

<ion-grid>
    <ion-row>
      <ion-col>
       <ion-card>
        <ion-card-header>
         <!-- some content -->
        </ion-card-header>
        <ion-card-content>
         <ion-list>
          <!-- some ion-item -->
         </ion-list>
        </ion-card-content>
       </ion-card>
      </ion-col>

      <ion-col>
      </ion-col>
    </ion-row>
</ion-grid>

Я применяю прокрутку к своему ion-card-content со следующим кодом scss: 

ion-card-content {
  max-height: calc(100% - #{50px});
  position: relative;
  overflow: hidden;
  overflow-y: auto;
  ::-webkit-scrollbar {
    display: none;
  }
}

Если я применю следующий код scss к моей ионной карте, прокрутка не будет работать: 

ion-card {
  max-height: 100%;
}

Если я применяю следующий код scss к моей ионной карте, прокрутка работает, но размер ионной карты все тот же, и когда у меня нет ионного элемента в моем списке ионов, он занимает весь экран: 

ion-card {
  height: 100%;
}

Знаете ли вы, как выполнить прокрутку и сохранить высоту, размер которой будет соответствовать размеру списка ионов?

(простите за мой английский)

1 Ответ

0 голосов
/ 14 мая 2019

Я решил проблему, установив следующий код CSS на моей ионной карте: 

ion-card {
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

Я также удалил элемент содержимого ионной карты и применил следующий код CSS в списке ионов: 

ion-list {
  overflow: hidden;
  overflow-y: auto;
  ::-webkit-scrollbar {
    display: none;
  }
}
...