I am in need of creating a table in Ionic. I thought of using Ionic grid but could not achieve what I wanted. How can I do this? Here is an image of something similar to what i want:
I can use this but how can I divide the rows like in the picture?
<div class="list">
<div class="item item-divider">
Candy Bars
</div>
<a class="item" href="#">
Butterfinger
</a>
...
</div>
The flexbox grid should do what you want. You're not clear as to what limitation you ran into, so it's hard to address your specifics.
Here's a codepen with a working sample that generates your table with the first couple rows and a header: http://codepen.io/anon/pen/pjzKMZ
HTML
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MyCtrl as ctrl">
<ion-header-bar class="bar-stable">
<h1 class="title">Service Provider Details</h1>
</ion-header-bar>
<ion-content>
<div class="row header">
<div class="col">Utility Company Name</div>
<div class="col">Service Code</div>
<div class="col">Pay Limit</div>
<div class="col">Account Number to Use</div>
<div class="col"></div>
</div>
<div class="row" ng-repeat="data in ctrl.data">
<div class="col">{{data.name}}</div>
<div class="col">{{data.code}}</div>
<div class="col">LK {{data.limit}}</div>
<div class="col">{{data.account}}</div>
<div class="col"><button class="button" ng-click="ctrl.add($index)">Add</button></div>
</div>
</ion-content>
</body>
</html>
CSS
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
.header .col {
background-color:lightgrey;
}
.col {
border: solid 1px grey;
border-bottom-style: none;
border-right-style: none;
}
.col:last-child {
border-right: solid 1px grey;
}
.row:last-child .col {
border-bottom: solid 1px grey;
}
Javascript
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope) {
var ctrl = this;
ctrl.add = add;
ctrl.data = [
{
name: "AiA",
code: "AI101",
limit: 25000,
account: "Life Insurance"
},
{
name: "Cargills",
code: "CF001",
limit: 30000,
account: "Food City"
}
]
////////
function add(index) {
window.alert("Added: " + index);
}
});
This should probably be a comment, however, I don't have enough reputation to comment.
I suggest you really use the table (HTML) instead of ion-row and ion-col.
Things will not look nice when one of the cell's content is too long.
One worse case looks like this:
| 10 | 20 | 30 | 40 |
| 1 | 2 | 3100 | 41 |
Higher fidelity example fork from #jpoveda
Simply, for me, I used ion-row and ion-col to achieve it. You can make it more neater by doing some changes by CSS.
<ion-row style="border-bottom: groove;">
<ion-col col-4>
<ion-label >header</ion-label>
</ion-col>
<ion-col col-4>
<ion-label >header</ion-label>
</ion-col>
<ion-col col-4>
<ion-label >header</ion-label>
</ion-col>
</ion-row>
<ion-row style="border-bottom: groove;">
<ion-col col-4>
<ion-label >row</ion-label>
</ion-col>
<ion-col col-4>
<ion-label >02/02/2018</ion-label>
</ion-col>
<ion-col col-4>
<ion-label >row</ion-label>
</ion-col>
</ion-row>
<ion-row style="border-bottom: groove;">
<ion-col col-4>
<ion-label >row</ion-label>
</ion-col>
<ion-col col-4>
<ion-label >02/02/2018</ion-label>
</ion-col>
<ion-col col-4>
<ion-label >row</ion-label>
</ion-col>
</ion-row>
<ion-row >
<ion-col col-4>
<ion-label >row</ion-label>
</ion-col>
<ion-col col-4>
<ion-label >02/02/2018</ion-label>
</ion-col>
<ion-col col-4>
<ion-label >row</ion-label>
</ion-col>
</ion-row>
This is the way i use it. It's very simple and work very well..
Ionic html:
<ion-content>
<ion-grid class="ion-text-center">
<ion-row class="ion-margin">
<ion-col>
<ion-title>
<ion-text color="default">
Your title remove if don't want use
</ion-text>
</ion-title>
</ion-col>
</ion-row>
<ion-row class="header-row">
<ion-col>
<ion-text>Data</ion-text>
</ion-col>
<ion-col>
<ion-text>Cliente</ion-text>
</ion-col>
<ion-col>
<ion-text>Pagamento</ion-text>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-text>
19/10/2020
</ion-text>
</ion-col>
<ion-col>
<ion-text>
Nome
</ion-text>
</ion-col>
<ion-col>
<ion-text>
R$ 200
</ion-text>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
CSS:
.header-row {
background: #7163AA;
color: #fff;
font-size: 18px;
}
ion-col {
border: 1px solid #ECEEEF;
}
Result of the code
the issue of too long content #beenotung can be resolved by this css class :
.col{
max-width :20% !important;
}
example fork from #jpoveda
You should consider using an angular plug-in to handle the heavy lifting for you, unless you particularly enjoy typing hundreds of lines of knarly error prone ion-grid code. Simon Grimm has a cracking step by step tutorial that anyone can follow:
https://devdactic.com/ionic-datatable-ngx-datatable/. This shows how to use ngx-datatable. But there are many other options (ng2-table is good).
The dead simple example goes like this:
<ion-content>
<ngx-datatable class="fullscreen" [ngClass]="tablestyle" [rows]="rows" [columnMode]="'force'" [sortType]="'multi'" [reorderable]="false">
<ngx-datatable-column name="Name"></ngx-datatable-column>
<ngx-datatable-column name="Gender"></ngx-datatable-column>
<ngx-datatable-column name="Age"></ngx-datatable-column>
</ngx-datatable>
</ion-content>
And the ts:
rows = [
{
"name": "Ethel Price",
"gender": "female",
"age": 22
},
{
"name": "Claudine Neal",
"gender": "female",
"age": 55
},
{
"name": "Beryl Rice",
"gender": "female",
"age": 67
},
{
"name": "Simon Grimm",
"gender": "male",
"age": 28
}
];
Since the original poster expressed their frustration of how difficult it is to achieve this with ion-grid, I think the correct answer should not be constrained by this as a prerequisite. You would be nuts to roll your own, given how good this is!
.html file
<ion-card-content>
<div class='summary_row'>
<div class='summarycell'>Header 1</div>
<div class='summarycell'>Header 2</div>
<div class='summarycell'>Header 3</div>
<div class='summarycell'>Header 4</div>
<div class='summarycell'>Header 5</div>
<div class='summarycell'>Header 6</div>
<div class='summarycell'>Header 7</div>
</div>
<div class='summary_row'>
<div class='summarycell'>
Cell1
</div>
<div class='summarycell'>
Cell2
</div>
<div class='summarycell'>
Cell3
</div>
<div class='summarycell'>
Cell5
</div>
<div class='summarycell'>
Cell6
</div>
<div class='summarycell'>
Cell7
</div>
<div class='summarycell'>
Cell8
</div>
</div>
.scss file
.row{
display: flex;
flex-wrap: wrap;
width: max-content;
}
.row:first-child .summarycell{
font-weight: bold;
text-align: center;
}
.cell{
overflow: auto;
word-wrap: break-word;
width: 27vw;
border: 1px solid #b3b3b3;
padding: 10px;
text-align: right;
}
.cell:nth-child(2){
}
.cell:first-child{
width:41vw;
text-align: left;
}
css
.table:nth-child(2n+1) {
background-color: whatever color !important;
}
html
<ion-row class="nameClass" justify-content-center align-items-center style='height: 100%'>
<ion-col>
<div>
<strong>name</strong>
</div>
</ion-col>
<ion-col>
<div>
<strong>name</strong>
</div>
</ion-col>
<ion-col>
<div>
<strong>name</strong>
</div>
</ion-col>
<ion-col>
<div>
<strong>name</strong>
</div>
</ion-col>
<ion-col>
<div text-center>
<strong>name</strong>
</div>
</ion-col>
</ion-row>
row 2
<ion-col >
<div>
name
</div>
</ion-col>
<ion-col >
<div>
name
</div>
</ion-col>
<ion-col >
<div>
name
</div>
</ion-col>
<ion-col>
<div>
name
</div>
</ion-col>
<ion-col>
<div>
<button>name</button>
</div>
</ion-col>
In Ionic 2 there's a easier way to do that. See the Ionic Docs.
It is more or less like the following:
<ion-grid>
<ion-row>
<ion-col>
1 of 3
</ion-col>
<ion-col>
2 of 3
</ion-col>
<ion-col>
3 of 3
</ion-col>
</ion-row>
</ion-grid>
Related
I want to center an element in ionic horizontally with the same margin on the left and right
<div class="tabs-group" class="ion-justify-content-center">
<ion-row>
<ion-col *ngFor="let i of tabsName,let j = index" size="4" (click)="switchToTabs(tabsindicator[j])" [ngClass]="tabs[tabsindicator[j]] ? 'primary-button' : 'secondary-button'">
<ion-grid>
<ion-row>
</ion-row>
<ion-row>
<ion-col>
<b>{{tabsName[j]}} </b>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
</ion-row>
</div>
ion-justify-content-center ionic CSS class is not applying centering , this is the output :
You have to use ion-justify-content-center on a flexbox node. So either you put display: flex on your wrapper div node, or you just use ion-justify-content-center on <ion-row> like so.
<ion-row class="ion-justify-content-center">
<ion-col>
<b>{{tabsName[j]}} </b>
</ion-col>
</ion-row>
<ion-grid style="height: 100%"> <ion-row justify-content-center align-items-center style="height: 100%; flex-direction: column"> <div text-center> <ion-icon name="images" style="zoom:5.0;" color="medium"></ion-icon> <h4>No Image Found</h4> <p>Looks like there are no converted image available at this moment, Please click <b> <ion-icon name="git-compare" color="medium" style="zoom:2.0;"></ion-icon> </b> button to convert a image</p> </div> </ion-row> </ion-grid>
https://codevampires.com/place-content-horizontally-vertically-in-center-ionic4/
I am trying to center the avatar to the middle, with the code below but it doesn't work.
I have used this class="ion-align-items-center" that i got from the ionic documents but with no successs.
<ion-grid style ="text-align: center">
<ion-row class="ion-align-items-center" >
<ion-col class="ion-align-items-center" *ngFor="let item of students" >
<!-- <div class= "imageHold" >
<ion-img [src]= "profileImage || item.profileImage"></ion-img>
</div> -->
<ion-avatar class="ion-align-items-center">
<ion-img [src]= "profileImage || item.profileImage"></ion-img>
</ion-avatar>
</ion-col>
</ion-row >
<ion-row style ="text-align: center">
<ion-col>
<ion-button size="small" fill="outline" (click)="chooseProfilePic()" >Choose Profile Photo</ion-button>
</ion-col>
</ion-row>
</ion-grid>
I get this result
add a class in the avatar div.
.avatar{
margin: auto;
}
I am using *ngFor="let item of cartItems; let i = index;" to inflate the list of items in the cart on my cart html page. What is happening is even if the cart items is more than 5-6, when the cart page is opened for the first time, only 2 items are displayed and somehow I am not able to scroll. When I click on the proceed button (present inside the footer element of the page) it takes me to the next page that is "Address form" and when I navigate back to the cart page again, I can scroll through the items. I don't know why is this happening that on the first load I am not able to scroll through the list.
I have used *ngFor in a lot of places and never faced such a behavior.
This is my cart.html file
<ion-card class="style-this-card">
<div>
<ion-list no-lines>
<div>
<ion-item no-lines *ngFor="let item of cartItems; let i = index;">
<ion-thumbnail item-start>
<img style="width:100px; height:100px" [src]='item.Meal.r_image'>
</ion-thumbnail>
<p style="color:firebrick; font-weight:bold;"> {{item.Meal.price | currency:'INR':"symbol"}}</p>
<p style="white-space:normal; font-weight:bold">{{item.Meal.name}}</p>
<!-- <p style="font-size:12px; white-space:normal">{{item.Meal.mealDes}}</p> -->
<p style="font-size:12px; white-space:normal">Edit quantity</p>
<ion-grid class="no-padding-no-margin">
<ion-row>
<ion-col class="no-padding-no-margin">
<button ion-button clear (click)="decreaseQty(item)">
<ion-icon name="remove"></ion-icon>
</button>
</ion-col>
<ion-col class="no-padding-no-margin">
<p class="qty">{{item.qty}}</p>
</ion-col>
<ion-col class="no-padding-no-margin">
<button ion-button clear (click)="increaseQty(item)">
<ion-icon name="add"></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-grid>
<ion-icon end name="trash" clear item-end (click)="remove(item.Meal, i )"></ion-icon>
</ion-item>
</div>
</ion-list>
</div>
This is my footer which is visible only when there are items present inside the cart
<ion-footer *ngIf='!noItems'>
<ion-item-group>
<ion-item-divider light text-left>Order Summary</ion-item-divider>
</ion-item-group>
<div>
<ion-grid style="margin-top: 5px; padding-left: 0px;">
<ion-row no-lines>
<ion-col no-lines style="align-items: center; display: flex; padding-left: 0px; margin-left: 0px;">
<ion-item style="margin: 0px;">
<ion-input placeholder="Coupon" [(ngModel)]="coupon"></ion-input>
</ion-item>
</ion-col>
<ion-col no-lines style="align-items: center; display: flex">
<ion-spinner *ngIf='isLoading'></ion-spinner>
<div [hidden]='isLoading'>
<button *ngIf='!isCouponValid' ion-button (click)="verify(coupon)">Apply</button>
<button *ngIf='isCouponValid' ion-button clear (click)="removeCoupon()">
<ion-icon name="md-close"></ion-icon>
</button>
</div>
</ion-col>
<ion-col>
</ion-col>
</ion-row>
</ion-grid>
</div>
<ion-grid no-padding>
<ion-row no-padding>
<ion-col>
<div no-padding id="block1" style="padding-top: 0px; padding-bottom: 0px">
<p style="font-size:14px; padding-top: 0px;">Sub Total</p>
</div>
<div no-padding id="block2" style="padding-top: 0px; padding-bottom: 0px">
<p style="font-size:14px; padding-top: 0px;">{{ total | currency:'INR':"symbol"}}</p>
</div>
</ion-col>
</ion-row>
<ion-row *ngIf='isApplyCoupon'>
<ion-col>
<div no-padding id="block1" style="padding-top: 0px; padding-bottom: 0px">
<p style="font-size:14px; padding-top: 0px; margin: 0px;">Coupon Applied</p>
</div>
<div no-padding id="block2" style="padding-top: 0px; padding-bottom: 0px">
<p style="font-size:14px; padding-top: 0px; margin: 0px;">{{ - discountAmt | currency:'INR':"symbol"}}</p>
</div>
</ion-col>
</ion-row>
<ion-row no-padding>
<ion-col *ngIf='isApplyCoupon'>
<div no-padding id="block1" style="padding-top: 0px">
<p style="font-size:16px; padding-top: 0px;">Total</p>
</div>
<div no-padding id="block2" style="padding-top: 0px">
<p style="font-size:16px; padding-top: 0px;">{{ finalDiscAmnt | currency:'INR':"symbol"}}</p>
</div>
</ion-col>
<ion-col *ngIf='!isApplyCoupon'>
<div no-padding id="block1" style="padding-top: 0px">
<p style="font-size:16px; padding-top: 0px;">Total</p>
</div>
<div no-padding id="block2" style="padding-top: 0px">
<p style="font-size:16px; padding-top: 0px;">{{ total | currency:'INR':"symbol"}}</p>
</div>
</ion-col>
</ion-row>
</ion-grid>
<button [hidden]='noItems' ion-button full color="primaryTwo" (click)="goToShipping()">CHECKOUT</button>
This is my cart.ts file. In my constructor, I am getting all the items inside of my cart
this.storage.ready().then(() => {
this.storage.get("cart").then((data) => {
if (data != null) {
this.cartItems = data;
console.log('cart items', this.cartItems);
// console.log("cart data FOR UTKARSH", JSON.stringify(data));
if (this.cartItems.length == 0 || this.cartItems == null) {
this.noItems = true;
console.log("no items here", this.noItems);
} else {
this.noItems = false;
this.cartItems.forEach((item, index) => {
// console.log("cartItems", this.cartItems[index].qty);
// console.log("the contents of item", item);
this.total = this.total + (item.Meal.price * item.qty)
this.finalDiscAmnt = this.total;
//console.log('The QTY is', item.qty);
//console.log("cart data 2", this.cartItems);
//this.displayPrice= this.displayPrice= item.product.produtPrice * item.qty;
//console.log("prices are ", this.displayPrice= item.product.produtPrice * item.qty);
});
}
}
});
}).catch((err) => {
this.noItems = true;
console.log(err);
this.cartItems = []
});
I solved the issue by adding #ViewChild(Content) content: Content to my cart.ts file and
using
setTimeout(() => {
this.content.resize();
}, 500);
inside of my constructor.
What this basically does is - tells the content to recalculate its dimensions. This should be called after dynamically adding/removing headers, footers, or tabs.
Since I was dynamically hiding my footer, this solved my issue.
I create scroll into a element, for do this I tried:
.scroll-content {
overflow: hidden;
}
.scrollabe {
overflow-y: scroll;
}
<ion-content>
<ion-grid style="height:100%" *ngIf="plat && ticket">
<ion-row>
<ion-col col-4 padding>
<ticket-info [ticket]="ticket"></ticket-info>
</ion-col>
<ion-col class="scrollabe" col-8 no-margin>
<ticket-acao [ticket]="ticket"></ticket-acao>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
But this hides my content:
My element
Also, i tried this way:
.scroll-content {
overflow: hidden;
}
<ion-content>
<ion-grid *ngIf="plat && ticket">
<ion-row>
<ion-col col-4 padding>
<ticket-info [ticket]="ticket"></ticket-info>
</ion-col>
<ion-col col-8 no-margin>
<ion-scroll scrollY="true" style="height: 100%;width: 100%">
<ticket-acao [ticket]="ticket"></ticket-acao>
</ion-scroll>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
and the same issue occurs...
The problem is solved if i decrease the height, but i lose the responsive layout.
So, what is the best way to make that?
Delete style="height: 100%" and both CSS rules you declared in there. The ion-content component will do the scroll for you if ion-grid overflows.
I need to structure the radio buttons as shown below.
image 1
I have tried as shown below.
.html
<ion-row>
<ion-col col-6>
<ion-grid radio-group formControlName="location">
<ion-row>
<ion-col col-12>
<ion-item *ngFor="let l of locations;let index = index">
<ion-label class="custom-radio">
<ion-radio value="{{index}}"></ion-radio>
<i class="{{l.icon}}"></i><br/> {{l.description}}
</ion-label>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
<ion-col col-6>
//other part
</ion-col>
</ion-row>
Then it looks like below.
Can you tell me how to design it looks like image 1?
If you can post your HTML and CSS, then I'd be happy to help with your actual code. However, in principle, you can do something like this;
HTML
<div class="ion-item">
<i class="l-icon"></i>
<span class="l-description">Text below the image</span>
</div>
CSS
.ion-item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 60px;
}
.l-icon {
width: 50px;
height: 50px;
}
.l-description {
display: block;
}