Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I fix a button to bottom ionic?

Tags:

angular

ionic2

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

like image 312
Yokesh Varadhan Avatar asked Mar 10 '17 12:03

Yokesh Varadhan


2 Answers

After your ion-content tag ends add this

<ion-footer>
  <ion-toolbar>
    <button ion-button (click)="Upload()"  full>Upload</button>
  </ion-toolbar>
</ion-footer>
like image 184
Devansh sadhotra Avatar answered Oct 11 '22 02:10

Devansh sadhotra


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.

like image 37
Rockin4Life33 Avatar answered Oct 11 '22 02:10

Rockin4Life33