Footer overwrite the content of page . How to fix it?

anespa · April 18, 2018, 4:30am

Friends,
In my page there is some dynamic data which show inside the

. On bottom of it there is a button too. But when it shows the Footer overwrites that button and hide it from click as shown in image below

How it can fix ?

My app.html is

<ion-header>
 <ion-navbar color="primary">
    <button ion-button menuToggle (click)="menuToggle()">
        <ion-icon name="menu"></ion-icon>                    
    </button>
    <!--
       <ion-icon> <img class="title-image" src="assets/img/samagra.png" /> </ion-icon>
    -->
    <ion-title>
       {{title|translate}}
    </ion-title>
    <ion-buttons *ngIf="title!='Settings'" end>      
      <button (click)="openSettingsPage()" ion-button>  
        <ion-icon name="settings" style="zoom:1.6;"></ion-icon>
      </button>
    </ion-buttons>  
  </ion-navbar>
</ion-header>

<ion-menu [content]="content" >
    <ion-content>
        <button class=clsbutton menuToggle (click)="menuToggle()">
          <img  src="assets/img/a.png" class="menu-logo"  />
        </button>     
        <ion-list>
          <ion-list-header  color="light">
            Account
          </ion-list-header>
            <div *ngIf="language">
              <button  menuClose ion-item *ngFor="let menuItem of appMenuItems" (click)="openPage(menuItem)">
                <ion-icon item-left [name]="menuItem.icon"></ion-icon>
                      {{menuItem.titleM|translate}}                            
              </button>        
            </div>

            <div *ngIf="!language">
              <button  menuClose ion-item *ngFor="let menuItem of appMenuItems" (click)="openPage(menuItem)">
                <ion-icon item-left [name]="menuItem.icon"></ion-icon>
                      {{menuItem.title|translate}}                
              </button>
            </div>
       
      
    </ion-list>

    <ion-list>
      
      <button menuClose ion-item *ngFor="let menuItem of helpMenuItems" (click)="openPage(menuItem)">
        <ion-icon item-left [name]="menuItem.icon"></ion-icon>
        {{menuItem.title|translate}}
      </button>
    </ion-list>
    <ion-list>
      <ion-list-header  color="light">
        Settings
      </ion-list-header>
      <button menuClose ion-item *ngFor="let menuItem of OtherMenuItems" (click)="openPage(menuItem)">
        <ion-icon item-left [name]="menuItem.icon"></ion-icon>
        {{menuItem.title|translate}}
      </button>
     
      </ion-list>
   

    </ion-content>
</ion-menu>


<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
<ion-footer class="bar-positive footernew" style="margin-top: 15px;">
<!--<div   >
@ Local Self Government Department Govt of Kerala...

</div>
-->
<ion-grid>
    <ion-row>
     <ion-col width-25 (click)="openPages('Home')" ><ion-icon name="home"><br><span style="font-size:11px;"> Home</span> </ion-icon></ion-col>
     <ion-col width-25 (click)="openPages('e pay')"><ion-icon name="card"></ion-icon><br><span style="font-size:11px;">e pay</span></ion-col>
     <ion-col width-25 (click)="openPages('certificate')"><ion-icon name="document"><br><span style="font-size:11px;">certificate</span></ion-icon></ion-col>
     <ion-col width-25 (click)="openPages('settings')"><ion-icon name="settings"></ion-icon><br><span style="font-size:11px;"> settings</span> </ion-col>
     <ion-col width-25 (click)="openPages('share')" ><ion-icon name="md-share"></ion-icon><br><span style="font-size:11px;"> share</span> </ion-col>
     
   </ion-row>
   </ion-grid>


</ion-footer>

my relevant page content is

 <h4>Pending Demand</h4>
 
  <table>
      <tr>
        <td>Total Pending Demand (Rs.):</td>
        <td>{{ param3 }}</td>
      </tr>
      <tr>
        <td>Penal (Rs.):</td>
        <td>{{ param4 }}</td>
      </tr>
      <tr>
          <td>Total Tax Payable (Rs.):</td>
          <td>{{ param5 }}</td>
      </tr>
  </table>    

  <table *ngIf="param3 !== 0">
      <tr>

          <th>Year-Period</th>

          <th>Account Head</th> 

          <th>Amount</th>

      </tr>

      <tr *ngFor="let pending of param2">
          <td>{{pending.chvPrintText}} {{pending.chvPeriod}}</td>
          <td *ngIf="pending.intAccountHeadId==1">Property Tax</td>
          <td *ngIf="pending.intAccountHeadId==2">Library Cess</td>
          <td>{{pending.fltAmount}}</td>
      </tr>
      <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td>Total : {{ param3 }}</td> 
     </tr>
     <tr>
         <td colspan="3"> <button *ngIf="param3 !== 0" ion-button (click)="payTax()">Pay</button>
            <div *ngIf="payFlag">
             <button ion-button (click)="taxPaymentDetails(param10,param11)">Payment Details</button> 
            </div> </td>
     </tr>
  </table>

Please advise how it can fix

Thanks

Anes