Hello i want to change the ion-col breakpoint and width while i display rows from my db.
I want rows with item.type= 'B' to be col-12 but rows with item.type A,C,D to be col-6. Any idea?
<ion-grid>
<ion-row>
<ion-col col-6 *ngFor="let item of items;" >
<ion-card>
<ion-card-content>
<div *ngIf="item.type==='A'">
some data
</div>
<div *ngIf="item.type==='B'">
some data 2
</div>
<div *ngIf="item.type==='C'">
some data 3
</div>
<div *ngIf="item.type==='D'">
some data 4
</div>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
you can achieve this using size attribute in ionic 4.
<ion-col *ngFor="let item of items;" [size]="item.type == 'B' ? 12 : 6 ">
<ion-card>
<ion-card-content>
<div *ngIf="item.type==='A'">
some data
</div>
<div *ngIf="item.type==='B'">
some data 2
</div>
<div *ngIf="item.type==='C'">
some data 3
</div>
<div *ngIf="item.type==='D'">
some data 4
</div>
</ion-card-content>
</ion-card>
</ion-col>
refrence https://ionicframework.com/docs/layout/grid#all-breakpoints
for ionic 3 you can use this code
<ion-grid>
<ion-row *ngFor="let item of items;">
<ng-container *ngIf="item.type == 'B'">
<ion-col col-12 >
<ion-card>
<ion-card-content>
<div *ngIf="item.type==='A'">
some data
</div>
<div *ngIf="item.type==='B'">
some data 2
</div>
<div *ngIf="item.type==='C'">
some data 3
</div>
<div *ngIf="item.type==='D'">
some data 4
</div>
</ion-card-content>
</ion-card>
</ion-col>
</ng-container>
<ng-container *ngIf="item.type != 'B'">
<ion-col col-6 >
<ion-card>
<ion-card-content>
<div *ngIf="item.type==='A'">
some data
</div>
<div *ngIf="item.type==='B'">
some data 2
</div>
<div *ngIf="item.type==='C'">
some data 3
</div>
<div *ngIf="item.type==='D'">
some data 4
</div>
</ion-card-content>
</ion-card>
</ion-col>
</ng-container>
</ion-row>
</ion-grid>
You can use this technique:
https://angular.io/api/common/NgIf
If you read through you will see something called the else block:
<div class="hero-list" *ngIf="heroes else loading">
...
</div>
<ng-template #loading>
<div>Loading...</div>
</ng-template>
So in your case it would be
<div *ngIf="item.type=='B' else sixRow">
...
</div>
<ng-template #sixRow>
...
</ng-template>
Related
need some help with IONIC 5..i want to add on click function to each of the ion item...i want a form to appear below when any of the raio item is clicked
I have tried to use (ng-click)="selection(item.id)"
and also tried
none seem to work as expected.
<div class="cat-holder">
<ion-radio-group>
<div class="rad-item" text-center>
<ion-item text-center>
<img src="assets/imgs/dstv.png" alt="">
<ion-radio value="transport"></ion-radio>
</ion-item>
<ion-label>Item1</ion-label>
</div>
<div class="rad-item" text-center>
<ion-item text-center>
<img src="assets/imgs/bill1.svg" alt="">
<ion-radio value="bill"></ion-radio>
</ion-item>
<ion-label>Item2</ion-label>
</div>
</ion-radio-group>
</div>
Use (click)="method you want"
And in ionic 5, using text-center is deprecated,i think you can use class="ion-text-center" instead
In yours ts file:
export yourclass{
selectedValue:any;
}
In you html file:
<div class="cat-holder">
<ion-radio-group>
<div class="rad-item" text-center>
<ion-item text-center>
<img src="assets/imgs/dstv.png" alt="">
<ion-radio [(ngModel)]="selectedValue" value="transport"></ion-radio>
</ion-item>
<ion-label>Item1</ion-label>
</div>
<div class="rad-item" text-center>
<ion-item text-center >
<img src="assets/imgs/bill1.svg" alt="">
<ion-radio [(ngModel)]="selectedValue" value="bill"></ion-radio>
</ion-item>
<ion-label>Item2</ion-label>
</div>
</ion-radio-group>
</div>
<div *ngIf="selectedValue=='value u want from radio"></div>
I was finaly able to get it done for IONIC 5 using the method below
ON .ts file i did it like this, using (ionChange)="segmentChanged($event)" on the ion-radio-group
category:any = "day";
then on HTML..hope it helps someone
<ion-label>Select Biller</ion-label>
<div class="cat-holder">
<ion-radio-group (ionChange)="segmentChanged($event)"
[value]="category">
<div class="rad-item" text-center >
<ion-item text-center>
<img src="assets/imgs/dstv.png" alt="">
<ion-radio value="transport" name="transport" ></ion-radio>
</ion-item>
<ion-label>Dstv</ion-label>
</div>
<div class="rad-item" text-center>
<ion-item text-center>
<img src="assets/imgs/gotv.png" alt="">
<ion-radio value="Gotv" name="gotv" ></ion-radio>
</ion-item>
<ion-label>Gotv</ion-label>
</div>
</ion-radio-group>
</div>
Hello I just did a fresh install of ionic, actually just learning it however when I loaded it my browser I saw something I didn't like.
There appears to be a right margin I cannot get rid of, I have tried and tried but nothing seems to work. How do I remove it?
This is my html:
<ion-header> <ion-navbar primary>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Welcome, Person</ion-title> </ion-navbar> </ion-header>
<ion-content class="no-padding no-margin">
<ion-grid class="data-table no-padding no-margin">
<ion-row class="header no-padding no-margin">
<ion-col justify-content-center padding>
<span class="label">
<span class="text col">Customer</span>
<span class="col">
<img src="assets/imgs/up-down-arrows.png" class="icon" />
</span>
</span>
</ion-col>
<ion-col justify-content-center padding>
<span class="label">
<span class="text col">Invoice #</span>
<span class="col">
<img src="assets/imgs/up-down-arrows.png" class="icon" />
</span>
</span>
</ion-col>
<ion-col justify-content-center padding>
<span class="label">
<span class="text col">Type</span>
<span class="col">
<img src="assets/imgs/up-down-arrows.png" class="icon" />
</span>
</span>
</ion-col>
<ion-col justify-content-center padding>
<span class="label">
<span class="text col">Amount</span>
<span class="col">
<img src="assets/imgs/up-down-arrows.png" class="icon" />
</span>
</span>
</ion-col>
<ion-col justify-content-center padding>
<span class="label">
<span class="text col">Method</span>
<span class="col">
<img src="assets/imgs/up-down-arrows.png" class="icon" />
</span>
</span>
</ion-col>
<ion-col justify-content-center padding>
<span class="label">
<span class="text col">No. of Tickets</span>
<span class="col">
<img src="assets/imgs/up-down-arrows.png" class="icon" />
</span>
</span>
</ion-col>
<ion-col justify-content-center padding>
<span class="label">
<span class="text col">Date & Time</span>
<span class="col">
<img src="assets/imgs/up-down-arrows.png" class="icon" />
</span>
</span>
</ion-col>
</ion-row>
</ion-grid>
<h3>Ionic Menu Starter</h3>
<p>
If you get lost, the docs will show you the way. </p>
<button ion-button secondary menuToggle>Toggle Menu</button> </ion-content>
This was a fresh ionic installation so it was like that before I even added my custom css.
I have a similar issue which <ion-card></ion-card> has left and right margins, it didn't help when I set no-margin, then I checked Overriding Ionic Varialbles and now the issue solved, you can check the site yourself and do your modification.
// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here
$card-ios-margin-left: 0;
$card-ios-margin-right: 0;
// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here
$card-md-margin-left: 0;
$card-md-margin-right: 0;
// App Windows Variables
// --------------------------------------------------
// Windows only Sass variables can go here
$card-wp-margin-left: 0;
$card-wp-margin-right: 0;
See attachedf image, left side is the original ion-card and right side is the one with settings(black part are the phone frame).
You could not implement custom padding if you want to inherit it from parent so:
<ion-content no-padding>
If you have to do with ion-card try this css:
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
Can anybody please verify this code in pure ionic-2 format.
Since I am bit confuse to check properly.
If This is not good format then What it could be?
`<ion-content padding>
<div class="main-contain" col-12 col-sm-12 col-md-6 col-lg-4 col-xl-3>
<div class="header">
<h2 text-center class="vision">Vision Logistica</h2>
<hr col-6 class="hrow">
<h3 text-center class="vision">Ciao, inserisci i tuoi dati
per<br/>accedere
</h3>
<hr col-6 class="hrow">
</div>
<h5 text-center>oppure</h5>
<div class="form" col-11>
<form [formGroup]="login" >
<div class="username">
<ion-item>
<ion-label stacked class="labels">Username</ion-label>
<ion-input class="inputs" type="text"
[(ngModel)]="username" formControlName="username"></ion-input>
</ion-item>
</div>
<div class="password">
<ion-item>
<ion-label stacked class="labels">Password</ion-label>
<ion-input class="inputs" type="password"
[(ngModel)]="password" formControlName="password"></ion-input>
</ion-item>
</div>
</form>
</div>
</div>
</ion-content>`
if you using visual studio than use command Alt + shift + f to format the html code
<ion-content padding>
<div class="main-contain" col-12 col-sm-12 col-md-6 col-lg-4 col-xl-3>
<div class="header">
<h2 text-center class="vision">Vision Logistica</h2>
<hr col-6 class="hrow">
<h3 text-center class="vision">Ciao, inserisci i tuoi dati
per<br />accedere
</h3>
<hr col-6 class="hrow">
</div>
<h5 text-center>oppure</h5>
<div class="form" col-11>
<form [formGroup]="login">
<div class="username">
<ion-item>
<ion-label stacked class="labels">Username</ion-label>
<ion-input class="inputs" type="text" [(ngModel)]="username" formControlName="username"></ion-input>
</ion-item>
</div>
<div class="password">
<ion-item>
<ion-label stacked class="labels">Password</ion-label>
<ion-input class="inputs" type="password" [(ngModel)]="password" formControlName="password"></ion-input>
</ion-item>
</div>
</form>
</div>
</div>
</ion-content>`
Perfect right dear.
Alt + shift + f in visual studio code
and if you don't use visual studio code
you can format online if your code doesn't leak information in third party page
I want to add an element outside of modal using Ionic2 like the image below.
The area surrounded by blue border is the element that I want to add.
The area surrounded by red border is the custom modal that I have created.
Custom Modal.html
<ion-header>
<ion-navbar class="select-header">
<ion-buttons left (click)="close()">
<button ion-button>
<img class="close" src="assets/images/close.png"/>
</button>
</ion-buttons>
<ion-title>{{title}}</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="region-selection">
<div class="select-all">
<img class="selection not-selected" src="assets/images/region/check_none.png"/>
<span>{{title}}</span>
</div>
<div class="select-region">
<ion-row class="regions-row" *ngFor="let row of rowsArray; let last = last" [ngClass]="{ last: last }">
<ion-col *ngFor="let region of regions | slice:(row*3):(row+1)*3">
<img class="selection not-selected" src="assets/images/region/check_none.png"/>
<span [innerHtml]="region"></span>
</ion-col>
</ion-row>
</div>
</ion-content>
Try placing all your items inside the ion-content and remove the ion-header to have a structure like this
<ion-content class="region-selection">
<div class="outside-element">
<!--element outside of modal-->
</div>
<!--This is your modal header wrapper-->
<div class="modal-header">
<ion-buttons left (click)="close()">
<button ion-button>
<img class="close" src="assets/images/close.png" />
</button>
</ion-buttons>
<ion-title>{{title}}</ion-title>
</div>
<!--This is your modal header wrapper-->
<div class="modal-content">
<div class="select-all">
<img class="selection not-selected" src="assets/images/region/check_none.png" />
<span>{{title}}</span>
</div>
<div class="select-region">
<ion-row class="regions-row" *ngFor="let row of rowsArray; let last = last" [ngClass]="{ last: last }">
<ion-col *ngFor="let region of regions | slice:(row*3):(row+1)*3">
<img class="selection not-selected" src="assets/images/region/check_none.png" />
<span [innerHtml]="region"></span>
</ion-col>
</ion-row>
</div>
</div>
</ion-content>
Now you can use css to style and position the elements using the classes .outside-element , .modal-header , .modal-content
Also, make sure to set your background-color to transparent
Ionic seems to be adding a <div class='fixed-content'> and <div class='scroll-content'> to my view and it's creating double margins. It seems to just add a lot of content and I'm assuming I can control it, I just don't know how.
Why would that happen?
my html:
<ion-content>
<ion-grid>
<ion-row>
<ion-col >
<ion-card>
<ion-card-content>
<img [src]="client.get_image.before_front_full || '../assets/newred_newblue_outline.png'">
</ion-card-content>
</ion-card>
</ion-col>
<ion-col>
<ion-card>
<ion-card-content>
<img [src]="client.get_image.before_side_full || '../assets/newred_newblue_outline.png'">
</ion-card-content>
</ion-card>
</ion-col>
<ion-col>
<ion-card>
<ion-card-content>
<img [src]="client.get_image.after_front_full || '../assets/newred_newblue_outline.png'">
</ion-card-content>
</ion-card>
</ion-col>
<ion-col>
<ion-card>
<ion-card-content>
<img [src]="client.get_image.after_side_full || '../assets/newred_newblue_outline.png'">
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
rendered content:
<ion-content class="content content-md">
<!-- DOUBLE MARGIN... WHY?! -->
<div class="fixed-content" style="margin-top: 56px; margin-bottom: 61px;"></div>
<div class="scroll-content" style="margin-top: 56px; margin-bottom: 61px;">
<ion-grid class="fill-height grid">
<ion-row class="row">
<ion-col class="col">
<ion-card class="card card-md">
<ion-card-content class="card-content card-content-md">
<img src="http://awaken180-assets.s3.amazonaws.com/clients/before_fronts/000/000/067/original/marty.jpg?1490189112">
</ion-card-content>
</ion-card>
</ion-col>
<ion-col class="col">
<ion-card class="card card-md">
<ion-card-content class="card-content card-content-md">
<img src="../assets/newred_newblue_outline.png">
</ion-card-content>
</ion-card>
</ion-col>
<ion-col class="col">
<ion-card class="card card-md">
<ion-card-content class="card-content card-content-md">
<img src="../assets/newred_newblue_outline.png">
</ion-card-content>
</ion-card>
</ion-col>
<ion-col class="col">
<ion-card class="card card-md">
<ion-card-content class="card-content card-content-md">
<img src="../assets/newred_newblue_outline.png">
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-content>
Yes, Ionic2 adds both fixed-content and scroll-content.
The fixed-content as the name says it's the content on the page that is fixed, if it's adding both margin to top and bottom it's because you have a header and a footer on this page, and it adds exactly the amount of px it's needed to leave the space for your header and footer on your device. So if you check on a device it may be 36px, on anothe it's 72px. If you want to test, remove the footer or header and check again, it'll not have margin top or bottom.
The scroll-content is where the scrollable content is, in this case, your ion-content. Everything inside ion-content is scrollable and added on scroll-content.
You can force css to it (i use the fixed-content class to add a non-scrollable background image to some projects), but it's not something nice to do because it'll make your content on the page go up, so if you have content right bellow the header it may be initialized behind the header.
So that's why Ionic2 creates these classes, it's just to ensure that your scrollable content goes right where it needs to be.