I have an Ionic 6 / angular 13 project which I am working with some modals. My modals have multiple breakpoints and they contains a card with header and content and also two buttons. I want these buttons to be visible at any breakpoints but always be at the bottom of the page view.
modal config:
const modal = await this.modalController.create({
component: MyComponent,
backdropBreakpoint: 0.1,
initialBreakpoint: 0.5,
breakpoints: [smallestBreakPoint, 0.5, 0.9]
})
MyComponent template:
<ion-card style="background-color: white; height: 90%;">
<ion-card-header class="pb-0 pt-2">
<ion-card-title>
...
</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-item lines="none">
...
</ion-item>
<ion-item lines="none" (click)="..." button>
...
</ion-item>
<ion-row>
<ion-col class="text-center">
<ion-button expand="block" class="custom-button" color="light">
...
</ion-button>
</ion-col>
<ion-col class="text-center" size="8">
<ion-button expand="block" class="custom-button" (click)="...">
...
</ion-button>
</ion-col>
</ion-row>
</ion-card-content>
</ion-card>
I tried changing <ion-row> and <ion-card> position and offset to everything, and none of them did the trick. Also I tried <ion-footer>. Please note that the card div is larger than it should be because it should open fully on 0.9 breakpoint.
Expected output:
How can I do this?
Thanks in advance!
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;
}
my Ionic applications has a bottom tabs, where I can choice different tab/page. Each tab/page has different top tabs, but I want to keep the some header sections for the entire app, where on the right there is the Logo of the App and on the right an ion-avatar, where when I click on them I can choice different user. How Can I achieve this?
<ion-header color="primary">
<ion-item color="primary">
<div width-50 item-start>
<img src="assets/icon/myLogo.png">
</div>
<div width-50 item-end>
<img src="assets/icon/avatar-icon.png">
</div>
</ion-item>
<ion-toolbar color="primary">
<ion-segment [(ngModel)]="topTab" (ionChange)="onTabChanged()">
<ion-segment-button value="send" >
<ion-icon color="light" title="Invia" name="send">Invia</ion-icon>
<ion-label>Invia</ion-label>
</ion-segment-button>
<ion-segment-button value="calendar" >
<ion-icon color="light" title="Inviate" name="calendar"></ion-icon>
<ion-label>Inviate</ion-label>
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<ion-content>...
How Can I achieve this? Also I'm not able to se the first image on the left and the second one on the right, where am I wrong?
You can create a custom header component and add the tag wherever you want.
For example:
#Component({
selector: 'my-header',
template: '<ion-header color="primary"> ... </ion-header>'
})
export class MyHeader{ ... }
and add <my-header> in the pages you want.
Regarding the images, you can use the grid system in Ionic.
<ion-grid>
<ion-row>
<ion-col>
<img src="assets/icon/myLogo.png">
</ion-col>
<ion-col>
<img src="assets/icon/avatar-icon.png">
</ion-col>
</ion-row>
</ion-grid>
I'm trying to implement the ion-item-sliding option to create an ion-card that can slide within a flex-box grid. Unfortunately, it doesn't seem to work very well.
To be specific, nothing actually happens! No matter what direction I swipe from, there is no indication of a swipe taking place.
Here is what I have so far:
<ion-content padding>
<ion-grid>
<ion-row>
<ion-col col-6 offset-sm-3 *ngFor = "let list of listRef | async">
<ion-item-sliding>
<ion-item>
<ion-card>
<img *ngIf="list.color=='#f55f7c'" src="data:image/png;base64,iVBORw0dsfladj=">
<img *ngIf="list.color=='#ffcb53'" src="data:image/png;base64,iVB5CYII=">
<img *ngIf="list.color=='#85dec8'" src="data:image/png;base64,iVBORw0KGgoAAAANSU=">
</ion-card>
</ion-item>
</ion-item-sliding>
<ion-item-options side="left">
<button ion-button>Favorite</button>
<button ion-button color="danger">Share</button>
</ion-item-options>
</ion-col>
<button id="add-bttn" ion-button [navPush]="goNew"><ion-icon name="add"></ion-icon></button>
</ion-row>
</ion-grid>
</ion-content>
I've tried it with the *ngFor statement placed within the tag and in the tag. No go.
Any help would be enlightening!
Just like you can see in the Docs, the ion-item-options should be within the ion-item-sliding element. Besides, the items should be placed inside of an ion-list container.
So something like this should work:
<ion-content padding>
<ion-list> <!-- Here I've added the ion-list -->
<ion-row>
<ion-col col-6 offset-sm-3 *ngFor = "let list of listRef | async">
<ion-item-sliding>
<!-- Item -->
<ion-item>
<ion-card>
<img src="https://randomuser.me/api/portraits/men/51.jpg">
</ion-card>
</ion-item>
<!-- Options -->
<ion-item-options side="left">
<button ion-button>Favorite</button>
<button ion-button color="danger">Share</button>
</ion-item-options>
</ion-item-sliding> <!-- This includes the options-->
</ion-col>
<button id="add-bttn" ion-button [navPush]="goNew">
<ion-icon name="add"></ion-icon>
</button>
</ion-row>
</ion-list>
</ion-content>
Stackblitz project
I want to be able to create a list of items using *ngFor as follows..
Text - Image
Image-Text
Text - Image
Image-Text
<ion-grid>
<ion-row *ngFor="let item of items">
<ion-col col-6 ">
<ion-card ">
<ion-card-content>{{item.name}}
</ion-card-content>
</ion-card>
</ion-col>
<ion-col col-6 >
<ion-card>
<img [src]="item.img"/>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
However, I am unsure how I could achieve this in a for loop.
Any suggestions? Thanks
Apply flex-direction: row-reverse when the index of the item is odd or even, your choice.
<!--HTML-->
<!--Track the index of each item and apply reverse class if its even or odd (which ever you prefer, just change the comparator)-->
<ion-grid>
<ion-row *ngFor="let item of items; let i = index;" [class.reverse]="i%2 !== 0">
<ion-col col-6>
<ion-card>
<ion-card-content>{{item.name}}
</ion-card-content>
</ion-card>
</ion-col>
<ion-col col-6>
<ion-card>
<img [src]="item.img" />
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
<!--CSS-->
.reverse { flex-direction: row-reverse; }