Ionic 4 - slider with searchbar, list and row of avatars

Hello all,

i try get a slider working with a searchbar and a list.

What do i want to do:
a site for creating some inputs, user goes through the slides step-by-step.
On one slide, i want to have:

  • top --> a searchbar

  • under searchbar --> a row with avatars (shows just the picture of checked item in checkbox)
    with ng-if,

  • under avatar-row --> list/checkbox with all items (searchable via searchbar)

I try to get it working with grid/col, but this leads into some strange design errors.
I also tried fixed position, but than i will have space betwenn searchbar and checkbox, when no item is checked …

Any ideas?

//Edit: sample code

<ion-slides>
    <ion-slide> <!-- slide 1 -->
        <ion-grid>
            <ion-row size="12" no-padding>
                <ion-col>
                    <ion-searchbar></ion-searchbar>
                </ion-col>
            </ion-row>
            <ion-row size="12" no-padding *ngIf="avatars">
                <ion-avatar *ngFor="let number of [0,1,2,3,4]">
                    <img src="https://cdn.iconscout.com/icon/free/png-256/avatar-375-456327.png">
                </ion-avatar>
            </ion-row>
            <ion-row size="12" no-padding>
                <ion-col>
                    <ion-list>
                        <ion-item>
                            <ion-label>some label</ion-label>
                            <ion-checkbox slot="end"></ion-checkbox>
                        </ion-item>
                    </ion-list>
                </ion-col>
            </ion-row>
        </ion-grid>
    </ion-slide>
    <ion-slide> <!-- slide 2 -->
    </ion-slide>
</ion-slides>