I'm doing a small UI with ionic, and I'm looking about the css utilities(https://ionicframework.com/docs/layout/css-utilities ).
I've this UI:
<ion-item>
<ion-grid >
<ion-row class="ion-align-items-center">
<ion-col size="4" class="ion-text-center">
<ion-avatar ><ion-img [src]="(loggedUser$ | async).avatarUrl"></ion-img></ion-avatar>
</ion-col>
<ion-col size="8" >
<ion-label >
<h2>{{ (loggedUser$ | async).userId }}</h2>
</ion-label>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
but currently, the ion-avatar is on the left of his ion-col.
Is there a way with those Ionic css utilities to center the ion-avatar in the middle of the column?
You need to add an extra div as shown.
From what I have seen the reason is how ionic framework creates the shadow dom. If you don't explicitly add the div to which to add the CSS util, ionic applies it in the wrong spot.
<ion-item>
<ion-grid >
<ion-row class="ion-align-items-center">
<ion-col size="4">
<div class="ion-text-center">
<ion-avatar ><ion-img [src]="(loggedUser$ | async).avatarUrl"></ion-img></ion-avatar>
</div>
</ion-col>
<ion-col size="8" >
<ion-label>
<h2>{{ (loggedUser$ | async).userId }}</h2>
</ion-label>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
Related
hello I have two ion toggle with their respective labels separated by columns in a row.
It looks like this:
How can I make both are in the center of the screen?
This is my code:
<ion-label class="titleFiltros" text-center>Filtrar por estado</ion-label>
<ion-list>
<ion-row>
<ion-col>
<ion-item no-lines>
<ion-label>Activa</ion-label>
<ion-toggle item-start [(ngModel)]="activa" (ionChange)="change()"></ion-toggle>
</ion-item>
</ion-col>
<ion-col>
<ion-item no-lines>
<ion-label>Anulada</ion-label>
<ion-toggle item-start [(ngModel)]="anulada" (ionChange)="change()"></ion-toggle>
</ion-item>
</ion-col>
</ion-row>
Appreciate your help.
Thanks.
Try this
<ion-label class="titleFiltros" text-center>Filtrar por estado</ion-label>
<ion-list>
<ion-row>
<ion-col class="ion-text-end">
<ion-item lines="none" style="float: right;">
Activa
<ion-toggle></ion-toggle>
</ion-item>
</ion-col>
<ion-col>
<ion-item lines="none">
Anulada
<ion-toggle></ion-toggle>
</ion-item>
</ion-col>
</ion-row>
</ion-list>
I found the solution and it works as I expected
Here I leave the code:
ion-item{
.input-wrapper{
flex:none;
margin-left: auto;
margin-right: auto;
}
ion-toggle{
margin-right:auto!important;
}
}
Here i am trying to place the the button signin and other button at the end of the page using ionic and i am using the ionic css utilities but i am not sure why it is not changing
i want
here is my code
<ion-content>
<ion-grid size="12" size-sm="8" offset-sm="2" class="ion-text-center">
<ion-row>
<ion-col>
<ion-list>
<ion-item detail>
<ion-icon name="settings-outline">
</ion-icon>
Settings
</ion-item>
</ion-list>
</ion-col>
</ion-row>
<ion-row class="ion-align-self-end">
<ion-col>
<ion-button> Register Button</ion-button>
</ion-col>
</ion-row>
<ion-row class="ion-align-self-end">
<ion-col>
<ion-button expand="block" >Sign Button</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
Try this.
<ion-content>
<ion-grid style="height: 100%; display: grid;" size="12" size-sm="8" offset-sm="2" class="ion-text-center">
<ion-row>
<ion-col>
<ion-list>
<ion-item detail>
<ion-icon name="settings-outline">
</ion-icon>
Settings
</ion-item>
</ion-list>
</ion-col>
</ion-row>
<ion-row class="ion-align-self-end">
<ion-col><ion-button> Register Button</ion-button>
<ion-button expand="block" >Sign Button</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
You can use power of CSS flexbox to achieve that like so:
<ion-content>
<ion-grid size="12" size-sm="8" offset-sm="2" style="display: flex; flex-flow: column; height: 100%">
<ion-row style="flex-grow: 1">
<ion-col>
<ion-list>
<ion-item detail>
<ion-icon name="settings-outline">
</ion-icon>
Settings
</ion-item>
</ion-list>
</ion-col>
</ion-row>
<ion-row class="ion-align-self-center">
<ion-col>
<ion-button> Register Button</ion-button>
</ion-col>
</ion-row>
<ion-row class="ion-align-self-center">
<ion-col>
<ion-button expand="block">Sign Button</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
Basically you make your ion-grid element to display as flexbox in column and set height to occupy 100% of height.
Then you can apply "flex-grow: 1" to an ion-row to make it stretch across all available space. In your case you only need to give that to the first ion-row.
Other options could be playing with display: absolute and bottom: 0 in your CSS.
I am trying to create a contact list on Ionic 5, using angular, but it is not possible to access this style. I'm a beginner at IONIC, can you help me?
How to leave a rendered image at the beginning of the card, with a icon and header and a icon with subheader, as in the image below?
my image:
my code:
<ion-content padding>
<ion-card>
<ion-grid>
<ion-row>
<ion-col>
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" style="border-radius: 50%; width: 80%; height: 85%">
</ion-col>
<ion-col>
<ion-item>
<h2>Marty McFly</h2>
</ion-item>
<ion-card-content>
<p>Wait a minute. Wait a minute, Doc. Uhhh</p>
</ion-card-content>
</ion-col>
</ion-row>
</ion-grid>
</ion-card>
</ion-content>
Thanks =)
You could just use a list of ion-items. They provide a round avatar to start the item, followed with a label which you can modify to sample your desired outcome.
<ion-content>
<ion-list>
<ion-item *ngFor="your loop here">
<ion-avatar slot="start">
<img src="...">
</ion-avatar>
<ion-label>
<ion-grid>
<ion-row>
<ion-col size="12">
<!-- name -->
</ion-col>
</ion-row>
<ion-row>
<ion-col size="2">
<!-- icon -->
</ion-col>
<ion-col size="10">
<!-- calender -->
</ion-col>
</ion-row>
<ion-row>
<ion-col size="2">
<!-- icon -->
</ion-col>
<ion-col size="10">
<!-- time -->
</ion-col>
</ion-row>
</ion-grid>
</ion-label>
</ion-item>
</ion-list>
</ion-content>
I have elements that I want to move to the right buts it't not working.
<ion-list>
<ion-item>
<ion-label>
<ion-skeleton-text animated width="70%"></ion-skeleton-text>
<ion-skeleton-text animated width="60%"></ion-skeleton-text>
</ion-label>
<ion-label slot="end">
<ion-skeleton-text animated width="30%"></ion-skeleton-text>
<ion-skeleton-text animated width="50%"></ion-skeleton-text>
</ion-label>
</ion-item>
This display this.
Now those two ion skeleton text. I want to align/float those to the right.
Thanks in advance.
Try this:
<ion-list>
<ion-item>
<ion-grid>
<ion-row>
<ion-col>
<ion-label>
<ion-skeleton-text animated width="70%"></ion-skeleton-text>
<ion-skeleton-text animated width="60%"></ion-skeleton-text>
</ion-label>
</ion-col>
<ion-col>
<ion-label>
<ion-skeleton-text animated width="30%"></ion-skeleton-text>
<ion-skeleton-text animated width="50%"></ion-skeleton-text>
</ion-label>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
</ion-list>
You might need to play with the padding classes if this doesn't look quite right.
It uses an ion-grid to create two columns.
I'm using Ionic 4 and I have an issue to display a background image to a specific part of my page.
Here the HTML code:
<ion-content>
<ion-grid>
<div id="match_details">
<ion-row class="match_time">
<ion-col text-center>
{{ match.datetime | date: 'dd/MM/yyyy' }}
</ion-col>
</ion-row>
<ion-row class="match_time">
<ion-col text-center *ngIf="match.status; else notStarted">
{{ match.status }}
</ion-col>
<ng-template #notStarted>
<ion-col text-center>
{{ match.time }}
</ion-col>
</ng-template>
</ion-row>
<ion-row>
<ion-col id="championship" text-center>
{{ match.championship }}
</ion-col>
</ion-row>
<ion-row *ngIf="match.result != null">
<ion-col col-5 text-center class="match">
{{ match.home_team }}
<div *ngFor="let goal of match.home_team_goals" class="striker">
<ion-icon name="football"></ion-icon><i> {{ goal }}</i>
</div>
</ion-col>
<ion-col col-2 text-center class="result">
{{ match.result }}
</ion-col>
<ion-col col-5 text-center class="match">
{{ match.away_team }}
<div *ngFor="let goal of match.away_team_goals" class="striker">
<ion-icon name="football"></ion-icon><i> {{ goal }}</i>
</div>
</ion-col>
</ion-row>
<ion-row *ngIf="match.result == null" align-items-center>
<ion-col col-5 text-center class="match">
{{ match.home_team }}
</ion-col>
<ion-col col-2 text-center>
-
</ion-col>
<ion-col col-5 text-center class="match">
{{ match.away_team }}
</ion-col>
</ion-row>
<ion-row>
<ion-col text-center *ngIf="match.stadium" class="stadium">
{{ match.stadium }}
</ion-col>
<ion-col text-center *ngIf="match.broadcast_type == 'Rediffusion'" class="stadium">
Rediffusion
</ion-col>
</ion-row>
</div>
<h3 *ngIf="match.channels_all != null" class="all_channels" text-center>Tous les diffuseurs</h3>
<ion-row>
<ion-col text-center *ngIf="(match.channels_all | json) != '{}'; else noChannel">
<ion-grid>
<ion-row *ngFor="let country of match.channels_all | mapToIterable" align-items-center class="row_channel">
<ion-col col-6>
{{ country.name }}
</ion-col>
<ion-col col-6>
<div *ngFor="let channel of country.channels">
{{channel}}
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
<ng-template #noChannel>
<ion-col text-center *ngIf="match.channels_all != null" >
<ion-col col-6>
France
</ion-col>
<ion-col col-6>
{{ match.channels }}
</ion-col>
</ion-col>
<ion-col text-center *ngIf="match.channels_all == null" >
</ion-col>
</ng-template>
</ion-row>
</ion-grid>
</ion-content>
And the css code for my match_details id I want to add a background image (which is not working):
#match_details {
--background: url("../../../assets/imgs/stade5.png") no-repeat center/cover fixed;
}
Here the relative path of my image :
src/assets/imgs/stade5.png
Note: I succeeded to display my image when I use the ion-content tag in the css (but I don't want the whole background with the image):
ion-content {
--background: url("../../../assets/imgs/stade5.png") no-repeat center/cover fixed;
}
Do someone have an idea how to do it ?
Thank you.
You just need to write the correct css property name for background image.
#match_details{
background-image:url("../../../assets/imgs/stade5.png");
}