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>
3 posts - 2 participants