display element in block - css

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>

Related

How do I make my ion-input equal width with my ion-item

My ion-input element has a grey line spanning the entire width of the view. I want it so the line is
equal to the ion-item elements.
<ion-content padding>
<ion-list>
<ion-item>
<ion-label>
<h1><strong>{{$route.params.excercise}}</strong> working set weight</h1>
<p>Include bar and plates</p>
</ion-label>
</ion-item>
<ion-item>
<ion-input placeholder="... kg" type="number" min="0" step="1.25"></ion-input>
</ion-item>
</ion-list>
...
<style scoped>
ion-input {
width: inherit; // doesn't work
}
</style>
Width too wide.

You can use class="ion-padding" from https://ionicframework.com/docs/layout/css-utilities and lines="inset" or lines="full" from https://ionicframework.com/docs/api/item
Option 1:
<ion-list class="ion-padding">
<ion-item lines="full">
<ion-label>
<h1><strong>Squat</strong> working set weight</h1>
<p>Include bar and plates</p>
</ion-label>
</ion-item>
<ion-item lines="full">
<ion-input placeholder="... kg" type="number" min="0" step="1.25"></ion-input>
</ion-item>
</ion-list>
Option 2:
<ion-content class="ion-padding">
<ion-list>
<ion-item lines="inset">
<ion-label>
<h1><strong>Squat</strong> working set weight</h1>
<p>Include bar and plates</p>
</ion-label>
</ion-item>
<ion-item lines="inset">
<ion-input placeholder="... kg" type="number" min="0" step="1.25"></ion-input>
</ion-item>
</ion-list>
</ion-content>

Ionic how to move an element to the right

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.

Ionic 3 ionic radio button display options near each other using flex

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>

ionic framework 3 help in css

I'm a back end programmer, but I'm getting enough to fix the desing of my components, I wanted to improve my label / input, but I'm not able to ...
HTML
<ion-item style="margin-left: -5%">
<ion-label style="font-size:15px;">Valor em BRL</ion-label>
<ion-input type="number" [disabled]="!tempreco()" [(ngModel)]="amount_from" placeholder="00,00" ></ion-input>
</ion-item>
<button ion-button small outline round stacked style=" margin-left: 20%;" (click)="usarSaldo()">Usar saldo</button>
<ion-item style="margin-left: -5%">
<ion-label style="font-size:15px;">Valor em BTC</ion-label>
<ion-input type="number" [(ngModel)]="price" placeholder="00,00" ></ion-input>
</ion-item>
<ion-item>
<ion-select [(ngModel)]="option" value="limitado">
<ion-option value="MERC">Mercado</ion-option>
<ion-option value="LMTD">Limitado</ion-option>
</ion-select>
</ion-item>

Ionic 3 Grid on Larger device is not working as expected (Hope I did it wrongly)

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

Resources