Прокрутка не появляется, когда список ионов находится внизу контейнера div - PullRequest
Новая
       12

Прокрутка не появляется, когда список ионов находится внизу контейнера div

0 голосов
/ 27 августа 2018

У меня есть ion-list внутри div контейнера. То, что я хочу, это:

  • Расположите список внизу родительского элемента div.
  • Если в списке есть другие элементы (нажмите синюю кнопку), которые не помещаются в div, должен появиться свиток.

Я получаю свиток с overflow:auto в родительском div. См. Код ниже (и пример в Stackblitz ):

HTML: 

<div class="video-container">
  <ion-list class="options-list">
        <button ion-item text-wrap *ngFor="let option of optionsList">
                {{ option }}
        </button>
    </ion-list>
</div>

<div class="finish-button-container">
    <button ion-button round (click)="addItemsToList()">ADD ITEMS TO LIST (ONLY ONCE)</button>
</div>

CSS: 

.video-container {
    position: relative;
    background-color: red;
    height: 200px;
    overflow: auto;

    .options-list {
        position: absolute;
        width: 100%;
        margin: 0;
        bottom: 0; // <---
    }
}

.finish-button-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 32px;
    position: relative;
}

Но вот что происходит:

enter image description here

Во-первых, когда список расположен сверху и я добавляю больше элементов, появляется прокрутка. Но если список расположен внизу и я добавляю больше элементов, прокрутка не появляется. Я не могу знать, что с этим не так.

...