I tried different possibilities to fix a button to bottom:
<ion-header>
<ion-navbar>
<ion-title>
<b > Audio Recorder</b>
</ion-title>
</ion-navbar>
<ion-toolbar >
<ion-segment color="danger">
<ion-segment-button value="camera">
Recorder
</ion-segment-button>
<ion-segment-button (click)="ListAudioFiles()">
Recording List
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content class="has-footer" padding>
<p *ngIf="!status" style="text-align: center; color: red;"><b> Recording... </b></p>
<p *ngIf="!status" style="text-align: center; color: black; font-size: 40px;">{{total}}</p>
<ion-grid style="text-align: center;">
<ion-icon *ngIf="status" style="font-size: 180px;" (click)="startRecording()" name="mic"></ion-icon>
<ion-icon *ngIf="!status" style="font-size: 180px; color: red" (click)="stopRecording()" name="mic"></ion-icon>
</ion-grid>
<ion-content>
And I also have a doubt if I added a button to header. I need to highlight the button I clicked. If I am in listing, the page listing button must be highlighted, and if the recorder clicked that button should be highlighted, and respective page should be loaded.
After your ion-content tag ends add this
<ion-footer>
<ion-toolbar>
<button ion-button (click)="Upload()" full>Upload</button>
</ion-toolbar>
</ion-footer>
Hopefully this helps someone out.
.your-class {
position: fixed;
left: 0;
bottom: 10px;
right: 0;
}
The left/right being set to 0 keeps everything centered up.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With