html - Ionic 2 Grid System Height Issues -


the goal:

from app.moqups.com

so, header @ top, , footer @ bottom.

its inbetween im having issues with.

currently html is:

<ion-content>   <ion-grid>     <ion-row class="amount-r" justify-content-center align-items-center>       <ion-col col-auto align-self-start text-center>         <p class="amount" [innerhtml]="amount"></p>       </ion-col>     </ion-row>     <ion-row class="source-r" justify-content-center align-items-center>       <ion-col col-7>         <ion-row align-items-end justify-content-center>           <ion-col col-auto text-end>             <p class="cpa-card-p" color="light">(source:               <ion-icon class="cpa-card-icon" name="card" ion-text color="light"></ion-icon>               <span>{{source}}</span> )             </p>           </ion-col>         </ion-row>       </ion-col>       <ion-col col-5>         <ion-row align-items-start justify-content-center>           <ion-col col-auto text-start>             <button (tap)="changesource()" ion-button clear no-padding no-margin>             <p no-padding no-margin style="text-decoration: underline;" ion-text color="e-green">change</p>             </button>           </ion-col>         </ion-row>       </ion-col>     </ion-row>     <ion-row class="numpad-r" align-items-center justify-content-center>       <numpad (pinupdated)="numinput($event)"></numpad>     </ion-row>   </ion-grid> </ion-content> 

and 3 relevant classes amount-r, source-r, numpad-r. thought give them percentages , align content according design. ad percentages, ion-grid height goes zero. how space out? recent ionic updates changed styling on me.

any advice or examples flow appreciated.

"dependencies": {     "@angular/common": "4.0.0",     "@angular/compiler": "4.0.0",     "@angular/compiler-cli": "4.0.0",     "@angular/core": "4.0.0",     "@angular/forms": "4.0.0",     "@angular/http": "4.0.0",     "@angular/platform-browser": "4.0.0",     "@angular/platform-browser-dynamic": "4.0.0",     "@ionic-native/contacts": "^3.4.4",     "@ionic-native/core": "3.4.2",     "@ionic-native/splash-screen": "3.4.2",     "@ionic-native/status-bar": "3.4.2",     "@ionic/storage": "2.0.1",     "ionic-angular": "3.0.0",     "ionic-native": "^2.9.0",     "ionicons": "3.0.0",     "rxjs": "5.1.1",     "sw-toolbox": "3.4.0",     "zone.js": "^0.8.4"   }, 


Comments

Popular posts from this blog

Command prompt result in label. Python 2.7 -

javascript - How do I use URL parameters to change link href on page? -

amazon web services - AWS Route53 Trying To Get Site To Resolve To www -