I want to fill the left side and the right side of an ion-list with different Weatherdata of different countries. I hope someone can help me. I have been looking for a solution for hours.
CLICK HERE FOR THE GUI OF THE APPLICATION
THIS IS THE GUI OF THE GUI
This is how my code looks like for the selection of the ion-list:
<ion-view title="Termine" hide-nav-bar="true" id="page3" style="background-color: rgb(220, 220, 224);" >
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-plus-round"></button>
</ion-nav-buttons>
<ion-content padding="true" class="manual-ios-statusbar-padding">
<div ng-controller="WeatherBerlinCtrl">
<!-- WEATHER SECTION -->
<ion-list id="termine-list">
<ion-item class="item-thumbnail-left" id="termine-list-item46"style="">
<img src={{vWeatherLinkIcon}}>
<h2 style="text-align: left; width:49%; display: inline-block; font-weight: bold;">Berlin {{vWeatherActDegrees}} °C</h2>
<!-- <img style="float: right;" src={{vWeatherLinkIcon}}> -->
<h2>Max: {{vWeatherMaxDegrees}} °C</h2>
<h2>Min: {{vWeatherMinDegrees}} °C</h2>
<!-- <div class="item-thumbnail-right">
<img style="float: right;" src={{vWeatherLinkIcon}}>
<div ng-controller="WeatherKabulCtrl">
<h2 style="text-align: right; width:50%; display: inline-block; font-weight: bold;">Berlin {{vWeatherActDegrees}} °C</h2>
</div> -->
</ion-list>
<div class="spacer" style="width: 748px; height: 15px;"></div>`
What about using an ion-grid inside your ion-list ?
<ion-grid>
<ion-row>
<ion-col>
left
</ion-col>
<ion-col>
right
</ion-col>
</ion-row>
</ion-grid>
ionic doc
Related
I'm trying to move my cards to the left to eliminate the space in the left margin.
I can't seem to move the cards closer to the left to eliminate the space in the left margin.
And I'm trying to add the title next to the avatar and the description at the bottom.
<ion-item *ngSwitchDefault>
<ion-card-content style="margin-left: 1px;" class="lists">
<ion-list *ngFor="let topic of groupTopics">
<ion-card style="width: 280px; height: 150px; margin: 1px; margin-left: 2px;" [ngSwitch]="topic.photoUrl">
<ion-avatar *ngSwitchDefault slot="start">
<img [src]="topic.photoUrl" />
</ion-avatar>
<ion-avatar *ngSwitchCase="'false'">
<img src="assets/img/add-an-image.png" />
</ion-avatar>
<ion-label>
<h2>{{topic.title}}</h2>
<p>{{topic.description}}</p>
</ion-label>
</ion-card>
</ion-list>
</ion-card-content>
</ion-item>
I have this kind of header in ionic 3
What I wanted to do was center the home title while ignoring the space occupied by my ion avatar
Here's what I tried
<ion-header >
<ion-navbar style="text-align: center;">
<ion-title>Home</ion-title>
<ion-buttons end>
<button ion-button round clear (click)="goToAccountPage()">
<ion-item class="transparent">
<ion-avatar item-end>
<!-- <img src="{{photo_url}}"> -->
<img [src]="photo_url" >
</ion-avatar>
</ion-item>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
and this
<ion-header >
<ion-navbar>
<ion-title text-center>Home</ion-title>
<ion-buttons end>
<button ion-button round clear (click)="goToAccountPage()">
<ion-item class="transparent">
<ion-avatar item-end>
<!-- <img src="{{photo_url}}"> -->
<img [src]="photo_url" >
</ion-avatar>
</ion-item>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
And then I tried implementing it directly and not inline
<ion-title class="center">Home</ion-title>
.center{
text-align: center;
}
To those who will encounter the same problem, please go to nourza's awesome and responsive answer :)
From this
to this
5]
Try this
.center{
position: absolute;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
You can use the following solution to selectively center text:
{
position: absolute;
text-align: center;
width: 100%;
left: 0;
}
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.
Initially i have used in ionic 1 to use the footer after the <ion-content> and befoew .But in new ionic 2 i dont see any <ion-view> is availble.
Because my requirement is after <ion-content> i need to have some two button at bottom of screen. It might be a fotter. So how can i use thos below ionic 1 code to make the footer button in ionic 2 ??
<div class="bar bar-footer bar-clear footer-button btnpadding" style="margin-bottom: 6px;padding-right: 6px; height: 8%;padding-top: 3px;">
<div class="button-bar font-color">
<button class="button button-outline" style="font-size: 14px;font-weight: bold;border: none;color: #696969;background-color: #fff" ng-click="LoginButtontap()">LOG IN</button>
<button class="button button-dark button-outline" style="margin-bottom: 5px;
margin-right: 5px;font-size: 14px;font-weight: bold;border: none;color: #fff">SIGN UP</button>
</div>
</div>
In Ionic 2 the basic page template follow this structure:
<ion-header>
<!-- PAGE HEADER CODE HERE -->
</ion-header>
<ion-content>
<!-- PAGE CONTENT CODE HERE -->
</ion-content>
<ion-footer>
<!-- FOOTER CODE HERE -->
<ion-button outline style="font-size: 14px;font-weight: bold;border: none;color: #696969;background-color: #fff" (click)="LoginButtontap()">LOG IN</ion-button>
<ion-button outline color="dark" style="margin-bottom: 5px;
margin-right: 5px;font-size: 14px;font-weight: bold;border: none;color: #fff">SIGN UP</ion-button>
</ion-footer>
so all you have to do is to put your buttons inside the <ion-footer> element. See also the official docs
In ionic how can i put a button at some percentage from the bottom ion-content?
I've tried
<ion-view>
<ion-content>
<div class="button-bottom">
<button class="button button-block button-energized">Button</button>
</div>
</ion-content>
</ion-view>
css:
.button-bottom{
position: absolute;
bottom: 30%;
}
but the button now not take the full width.
Try giving your container an explicit width:
.button-bottom{
position: absolute;
bottom: 30%;
width: 100%;
}
Add "full" variable in your button
Ex:- button class="button button-block button-energized" full >Button</button>
For more reference see Ionic Documentation on UI Components in the link below.
Ionic Full Button
Just move the button to outside of the ion-content.
Example:
Ionic 3:
<ion-view>
<ion-content>
</ion-content>
<div class="button-bottom">
<button class="button button-block button-energized">Button</button>
</div>
</ion-view>
Ionic 4:
<ion-header>
<ion-toolbar>
<ion-title>Example</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<p> your content </p>
</ion-content>
<ion-row>
<ion-col>
<ion-button>
Button Bottom (Not fixed on scroll)
</ion-button>
</ion-col>
</ion-row>