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>
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>
I´m trying to set the background color of a page in ionic project to two different colors, but this page have an element on it, so i´m having problems with it. The html code of the page is this:
<ion-content>
<div style="height: 100%; display: flex; align-items: center; justify-content: center; text-align: center;">
<ion-card>
<ion-card-header>
<ion-toolbar>
<ion-title>
<ion-item-divider>
<ion-label>
<img width="150" src = "./assets/images/logo.png">
</ion-label>
</ion-item-divider>
<ion-label>
<br/>Acceder
</ion-label>
</ion-title>
</ion-toolbar>
</ion-card-header>
<ion-card-content padding = "true">
<form #form="ngForm" method="post">
<ion-item>
<ion-input [(ngModel)] = "postData.username" type="text" name="username" placeholder="Usuario"></ion-input>
</ion-item>
<ion-item>
<ion-input [(ngModel)] = "postData.password" type="password" name="password" placeholder="Contraseña"></ion-input>
</ion-item>
<ion-item lines ='none'>
<a routerLink='/signup'>Create account</a>
</ion-item>
<ion-button expand="block" share = "round" color="primary" (click) ="loginAction()">Login</ion-button>
</form>
</ion-card-content>
</ion-card>
</div>
</ion-content>
Sorry for my english, is not my mother tongue
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>
I'm using #media print styling to condense a bulky page of ion-inputs to reduce the page count by 15 pages.
Print to pdf (print preview and opening the saved pdf) looks good in Firefox v63,
but in Chrome v70 it produces aliasing or entire line absence when I set min-height, regardless of chrome page margins of None or Default. I have also seen it drop the id, description, subitem name, or the price line if they fall in the page break gap.
Is there a way to prevent Chrome from aliasing or dropping lines around its automatic page wraps/breaks?
--
Code:
#media print {
ion-item, .item-inner, .input-wrapper, ion-input, input {
min-height: 23px !important; // causes line aliasing
height: 24px !important;
max-height: 25px !important;
line-height: 26px !important;
}
}
<ion-card *ngFor="let eachCard of myCards">
<ion-row>
<ion-col col-2>
<ion-item>
<ion-input type="text" [(ngModel)]="eachCard.id"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-11>
<ion-item>
<ion-input type="text" [(ngModel)]="eachCard.description1"></ion-input>
</ion-item>
<ion-item>
<ion-input type="text" [(ngModel)]="eachCard.description2></ion-input>
</ion-item>
<ion-item>
<ion-input type="text" [(ngModel)]="eachCard.description3"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<div *ngFor="let eachSubitem of eachCard.subitems">
<ion-row>
<ion-col col-1></ion-col>
<ion-col col-5>
<ion-item>
<ion-input type="text" [(ngModel)]="eachSubitem.name"></ion-input>
</ion-item>
</ion-col>
<ion-col col-5>
<ion-item>
<ion-input type="text" [(ngModel)]="eachSubitem.altName"></ion-input>
</ion-item>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-1></ion-col>
<ion-col col-3>
<ion-item>
<ion-input type="number" [(ngModel)]="eachubitem.price"></ion-input>
</ion-item>
</ion-col>
<ion-col col-7>
<ion-item>
<ion-input type="text" [(ngModel)]="eachSubitem.unit"></ion-input>
</ion-item>
</ion-col>
</ion-row>
</div>
</ion-card>
Solved:
ion-item {
display: inline-block !important;
}
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