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.
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'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>
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 need to put radio button options near each other:
<ion-content padding>
<ion-list radio-group>
<ion-list-header>
Auto Manufacturers
</ion-list-header>
<ion-item *ngFor="let entry of array">
<ion-radio (click)="getVal()" slot="start" [value]="entry"></ion-radio>
<ion-label> {{entry}}</ion-label>
</ion-item>
</ion-list>
</ion-content>
I tried to use flex but it didn't work:
display: flex
The current behavior is 2 options beneath each other. But how can I use flex to display them near each other?
Here is a stackblitz
You can also use grid system to achieve this:
<ion-content padding>
<ion-list radio-group>
<ion-list-header>
Auto Manufacturers
</ion-list-header>
<ion-row>
<ion-col *ngFor="let entry of array">
<ion-item >
<ion-radio (click)="getVal()" slot="start" [value]="entry"></ion-radio>
<ion-label> {{entry}}</ion-label>
</ion-item>
</ion-col>
</ion-row>
</ion-list>
</ion-content>