<button ion-button color="light" (click)="open('help')">Help</button>
<button ion-button color="light" (click)="open('sample')">Add Entry</button>
<button ion-button color="light" (click)="open('checkbook')">Checkbook</button>
<ion-item *ngIf="display.sample || display.checkbook">
<ion-label>Account</ion-label>
<ion-select [(ngModel)]="accountSelected" multiple="false" (ionChange)="updateSelectedAccount(accountSelected)">
<ion-option *ngFor='let account of accountsList' [value]="account">{{ account }}</ion-option>
</ion-select>
</ion-item>
<!-- <button ion-button item-start (click)="buttonClick()" block>HELP</button>
<button ion-button item-start (click)="buttonClick()" block>SAMPLE</button>
<button ion-button item-start (click)="buttonClick()" block>CHECKBOOK</button> -->
<!-- Display the help block here -->
<div class="help-block" *ngIf="display.help">
<div class="row-header">Checkbook Register</div>
<div class="help-body">
<p>
Sample Check Book Register comprising of Sample Register sheet is an example Check Book Register to understand the Check Book Register application. The focus of the Sample sheet is to help user understand how Check Book Register should be maintained by a user. The user can also remove the sample values individually by clicking on cross button, and can maintain it as a separate Check Book Register for the family members or business partner simultaneously.
</p><br>
<p>
Check Book Register comprising of Check Book Register sheet is for maintaining for maintaining transaction records for your enterprise or personal use.
</p><br>
<p>Explanation of tables in Sample and Check Book Register sheets.</p>
</div>
<ion-grid>
<ion-row>
<ion-col>Column Name</ion-col>
<ion-col>Description</ion-col>
</ion-row>
</ion-grid>
<br>
<ion-grid>
<ion-row>
<ion-col>Date</ion-col>
<ion-col>Date of transaction. The date when the payment is due or the date when the payment is received.</ion-col>
</ion-row>
</ion-grid>
<br>
<ion-grid>
<ion-row>
<ion-col>Num</ion-col>
<ion-col>Type of transcation</ion-col>
</ion-row>
</ion-grid>
<br>
<ion-grid>
<ion-row>
<ion-col>Description</ion-col>
<ion-col>Details of the Description</ion-col>
</ion-row>
</ion-grid>
<br>
<ion-grid>
<ion-row>
<ion-col>R</ion-col>
<br>
<ion-col>R is for Reconsile.When balancing your CheckBook,add an R in this column to indicate that the transaction is correct,and reconciled with your bank statement</ion-col>
</ion-row>
</ion-grid>
<br><br>
<ion-grid>
<ion-row>
<ion-col>Withdrawal,Payment</ion-col>
<ion-col>Amount Withdrawn</ion-col>
</ion-row>
</ion-grid>
<br>
<ion-grid>
<ion-row>
<ion-col>Deposit,Credit</ion-col>
<ion-col>Amount Deposited</ion-col>
</ion-row>
</ion-grid>
<br>
<ion-grid>
<ion-row>
<ion-col>Balance</ion-col>
<ion-col>Account Balance</ion-col>
</ion-row>
</ion-grid>
</div>
<!-- Display the sample block here -->
<div class="sample-block" *ngIf="display.sample">
<ion-item>
<ion-label>Date</ion-label>
<ion-input type="text" [(ngModel)]="entry.date" name="Date"></ion-input>
</ion-item>
<ion-item>
<ion-label>Num</ion-label>
<ion-input [(ngModel)]="entry.num" name="Num"></ion-input>
</ion-item>
<ion-item>
<ion-label>Description</ion-label>
<ion-textarea [(ngModel)]="entry.description" name="Description"></ion-textarea>
</ion-item>
<ion-item>
<ion-label>R</ion-label>
<ion-input [(ngModel)]="entry.r" name="R"></ion-input>
</ion-item>
<ion-item>
<ion-label>Withdraw</ion-label>
<ion-input [(ngModel)]="entry.withdraw" name="Withdraw"></ion-input>
</ion-item>
<ion-item>
<ion-label>Deposit</ion-label>
<ion-input [(ngModel)]="entry.deposit" name="Deposit"></ion-input>
</ion-item>
<button ion-button type="submit" (click)="logEntry()">Add Entry</button>
</div>
<!-- Display the help block here -->
<div class="checkbook-block" *ngIf="display.checkbook"></div>
<div class=" row-header">Checkbook Register
<ion-grid>
<ion-row>
<ion-col>Date</ion-col>
<ion-col>Num</ion-col>
<ion-col>Description</ion-col>
<ion-col>R</ion-col>
<ion-col>Withdrawal, Payment (-)</ion-col>
<ion-col>Deposit, Credit (+)</ion-col>
<ion-col>Bank Reconcilation</ion-col>
<ion-col>Balance</ion-col>
</ion-row>
</ion-grid>
<br><br>
<ion-grid>
<ion-row *ngFor='let entry of register.checkbook'>
<ion-col>{{ entry.date }} </ion-col>
<br>
<ion-col>{{ entry.num }} </ion-col>
<ion-col>{{ entry.description }} </ion-col>
<br>
<ion-col>{{ entry.r }} </ion-col>
<ion-col>{{ entry.withdraw }} </ion-col>
<ion-col>{{ entry.deposit }} </ion-col>
<ion-col> {{entry.bank}}</ion-col>
<ion-col>{{ entry.balance }} </ion-col>
</ion-row>
</ion-grid>
<br>
<br>
</div>
</ion-content>
I know trying to create a page…whose layout in browser is well.but issue with the same layout in Android device. Browser images
Problem solved…
How? Please share the solution for future readers.
my home.html file-
<div class="help-block" *ngIf="display.help">
<div class="row-header">Checkbook Register</div>
<div class="help-body">
<p>
Sample Check Book Register comprising of Sample Register sheet is an example Check Book Register to understand the Check Book Register application. The focus of the Sample sheet is to help user understand how Check Book Register should be maintained by a user. The user can also remove the sample values individually by clicking on cross button, and can maintain it as a separate Check Book Register for the family members or business partner simultaneously.
</p><br>
<p>
Check Book Register comprising of Check Book Register sheet is for maintaining for maintaining transaction records for your enterprise or personal use.
</p><br>
<p>Explanation of tables in Sample and Check Book Register sheets.</p>
</div>
<table>
<tr>
<td>Column Name</td>
<td>Description</td>
</tr>
<tr>
<td>Date</td>
<td>Date of transaction. The date when the payment is due or the date when the payment is received.</td>
</tr>
<tr>
<td>Num</td>
<td>Type of transcation</td>
</tr>
<tr>
<td>Description</td>
<td>Details of the Description</td>
</tr>
<tr>
<td>R</td>
<td>R is for Reconsile.When balancing your CheckBook,add an R in this column to indicate that the transaction is correct,and reconciled with your bank statement</td>
</tr>
<tr>
<td>Withdrawal,Payment</td>
<td>Amount Withdrawn</td>
</tr>
<tr>
<td>Deposit,Credit</td>
<td>Amount Deposited</td>
</tr>
<tr>
<td>Balance</td>
<td>Account Balance</td>
</tr>
</table>
</div>
<!-- Display the sample block here -->
<div class="sample-block" *ngIf="display.sample">
<ion-item>
<ion-label>Date</ion-label>
<ion-input type="text" [(ngModel)]="entry.date" name="Date"></ion-input>
</ion-item>
<ion-item>
<ion-label>Num</ion-label>
<ion-input [(ngModel)]="entry.num" name="Num"></ion-input>
</ion-item>
<ion-item>
<ion-label>Description</ion-label>
<ion-textarea [(ngModel)]="entry.description" name="Description"></ion-textarea>
</ion-item>
<ion-item>
<ion-label>R</ion-label>
<ion-input [(ngModel)]="entry.r" name="R"></ion-input>
</ion-item>
<ion-item>
<ion-label>Withdraw</ion-label>
<ion-input [(ngModel)]="entry.withdraw" name="Withdraw"></ion-input>
</ion-item>
<ion-item>
<ion-label>Deposit</ion-label>
<ion-input [(ngModel)]="entry.deposit" name="Deposit"></ion-input>
</ion-item>
<button ion-button type="submit" (click)="logEntry()">Add Entry</button>
</div>
<!-- Display the help block here -->
<div class="checkbook-block" *ngIf="display.checkbook">
<div class=" header">Checkbook Register</div>
<ion-row class="row-header">
<ion-col>Date</ion-col>
<ion-col>Num</ion-col>
<ion-col>Description</ion-col>
<ion-col>R</ion-col>
<ion-col>Withdrawal, Payment (-)</ion-col>
<ion-col>Deposit, Credit (+)</ion-col>
<ion-col>Bank Reconcilation</ion-col>
<ion-col>Balance</ion-col>
</ion-row>
<br><br>
<ion-row *ngFor='let entry of register.checkbook'>
<ion-col>{{ entry.date }} </ion-col>
<ion-col>{{ entry.num }} </ion-col>
<ion-col>{{ entry.description }} </ion-col>
<ion-col>{{ entry.r }} </ion-col>
<ion-col>{{ entry.withdraw }} </ion-col>
<ion-col>{{ entry.deposit }} </ion-col>
<ion-col> {{entry.bank}}</ion-col>
<ion-col>{{ entry.balance }} </ion-col>
</ion-row>
</div>
ya sure,I made the following changes in m html file.
1 Like
