html - Ionic 2 Grid System Height Issues -
the goal:
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
Post a Comment