Have a sticky footer on ionic modal

Ionic Framework
1

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

Screenshot 2022-03-03 at 10.30.51
Screenshot 2022-03-03 at 10.30.51588×1264 59.7 KB

Screenshot 2022-03-03 at 10.31.01
Screenshot 2022-03-03 at 10.31.01590×1262 247 KB

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:

Screenshot 2022-03-03 at 11.39.44
Screenshot 2022-03-03 at 11.39.44446×788 104 KB

2 Likes
2

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
3

I have updated the post

1 Like
4

I have the same problem

I have a IonModal with breakpoints and the footer is in the bottom of the content but i would like to have a way to stick it to the bottom of the viewport

<IonModal 
      ref={modal}
      id="edit-modal-item"
      isOpen={isOpen}
      initialBreakpoint={0.75}
      backdropDismiss
      breakpoints={[0.25, 0.5, 0.75]}
      onIonModalWillDismiss={dismiss}>
<IonHeader>
...
</IonHeader>
<IonContent>
...
</IonContent>
<IonFooter>
...
</IonFooter>
</IonModal>

The IonFooter is in the bottom of the content but i want to have the Footer in the bottom of the ViewPort

5

I found the way using <IonFooter style={{ position: ‘sticky’, bottom: 0 }}> it works

But i have to use the ion-modal: Ionic Mobile App Custom Modal API Component instead of using breakpoints