CODEWITHSUNDEEP
angularionic2
Yokesh Varadhan
Yokesh Varadhan

Reputation: 1636

How do I fix a button to bottom ionic?

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.

enter image description here

Upvotes: 13

Views: 36991

Answers (3)

Kartik Pareek
Kartik Pareek

Reputation: 23

You don't need to use toolbar, you can directly use ion-button in ion-footer

<ion-footer>
   <ion-button expand="full" (click)="Upload()">Upload</ion-button>
 </ion-footer>

Upvotes: 1

Rockin4Life33
Rockin4Life33

Reputation: 2395

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.

Upvotes: 36

Devansh sadhotra
Devansh sadhotra

Reputation: 1625

After your ion-content tag ends add this

<ion-footer>
  <ion-toolbar>
    <button ion-button (click)="Upload()"  full>Upload</button>
  </ion-toolbar>
</ion-footer>

Upvotes: 27

Related Questions