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>
Related
I'm trying to display element like this image But when I wrap in <ion-item> it display like this image .What should I do to change it.. I've using display:block but it not working.
page
<ion-list>
<ion-item>
<h2>Name</h2>
<div>
<ion-input placeholder="Name" [(ngModel)]="name"></ion-input>
</div>
</ion-item>
</ion-list>
Use Position attribute:
<ion-item>
<ion-label position="floating">Floating Label</ion-label>
<ion-input></ion-input>
</ion-item>
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 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 3 flexbox grid system as shown below.This is a Modal `controller.
.html
<ion-content class="content">
<ion-grid no-padding>
<ion-row class="header">
</ion-row>
<ion-row padding class="details">
<ion-col>
<form [formGroup]="forgotPasswordForm" (submit)="goToNext()" novalidate>
<ion-item>
<ion-label>
<ion-icon name="person"></ion-icon>
</ion-label>
<ion-input type="text" placeholder="Distributor ID" formControlName="distributorId"></ion-input>
</ion-item>
<button ion-button block class="button-radius-25" type="submit"><span>Next <ion-icon name="arrow-round-forward"></ion-icon></span></button>
<ion-item no-lines>
<ion-label class="font-size-14" text-center>Not a member? Sign up now!</ion-label>
</ion-item>
</form>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
.scss
.content {
ion-grid {
height: 100%;
}
.header {
flex: 1;
}
.details {
flex: 3;
}
}
Mobile device - No issues
But on the desktop, it shows as below.
Q: It seems very bad on a larger device.How can I keep the same kind of ratio (I mean small sizes on components for Button and textbox) and centered the content on the larger device too? Hope you'll give the suggestions for this.
You can use col-sm-, col-md-... to change item size in different screen size:
<ion-row padding class="details">
<ion-col col-lg-6 col-md-6 col-12>
<form [formGroup]="forgotPasswordForm" (submit)="goToNext()" novalidate>
<ion-item>
<ion-label>
<ion-icon name="person"></ion-icon>
</ion-label>
<ion-input type="text" placeholder="Distributor ID" formControlName="distributorId"></ion-input>
</ion-item>
<button ion-button block class="button-radius-25" type="submit"><span>Next <ion-icon name="arrow-round-forward"></ion-icon></span></button>
<ion-item no-lines>
<ion-label class="font-size-14" text-center>Not a member? Sign up now!</ion-label>
</ion-item>
</form>
</ion-col>
</ion-row>
and to center item:
.details{
justify-content: center;
}
See more about ionic grid