Have a sticky footer on ionic modal

How do I make the footer within my ion-modal sticky? now it sticks to the bottom of the modal but it should sticky to the bottom of the screen even though its in the modal


The test modal has the footer. I want this footer to stick to the bottom of the screen even though its in the modal its self. Its conditional too, when a user clicks on an item the button within the footer appears, but it is only visible when the modal is pulled all the way up, it should stick to the bottom of the screen

 <ion-modal class="sheet-modal"
    [isOpen]="true"
    [breakpoints]="[0.2, 0.4, 1]"
    [initialBreakpoint]="0.3"
    [backdropBreakpoint]="0.6"
    [backdropDismiss]="false"
    
    >
    <ng-template >
        <ion-header>
            <ion-toolbar>
                <ion-title>{{value}}</ion-title>
                <ion-buttons slot="end">
                    <ion-button *ngIf="false" (click)="collapseSheetModal()">
                        <ion-icon color="secondary" name="caret-down"></ion-icon>
                    </ion-button>
                </ion-buttons>
            </ion-toolbar>
        </ion-header>
        
        <ion-content>
            <ion-list>
                <ion-item *ngFor="let facility of facilitys; let i = index">
                    <ion-label>{{facility.name}}</ion-label>
                    <ion-checkbox (ionChange)="zoomToFacility($event.detail,facility)"  [(ngModel)]="facility.isChecked" [value]="facility" [name]="facility.name" color="secondary" ></ion-checkbox>
                </ion-item>
            </ion-list>
        </ion-content>
        <ion-footer class="footer">
            <ion-toolbar *ngIf="selected">
                <ion-button >
                    View units in {{selected.name}}
                </ion-button>
        </ion-toolbar>
        </ion-footer>
    </ng-template>
    </ion-modal>

It should look like this where the footer sticks regardless of the modal break points:

More information please. What are you doing currently (ahow code) and what is the result (show image) - what exactly do you want to archieve (show mockup image if possible)

1 Like

I have updated the post

1 Like