I want to display label and input on left side sequentially and button/icon on right side.
i have tried with using grid as
<ion-grid>
<ion-row>
<ion-col width-10>
<ion-icon name="phone-portrait"></ion-icon>
</ion-col>
<ion-col width-70>
<ion-input type="text" placeholder="Mobile no"></ion-input>
</ion-col>
<ion-col width-10>
<ion-icon name="contacts" (click)="pickContactNo()"></ion-icon>
</ion-col>
</ion-row>
</ion-grid>
It display's it inline but the input box slightly goes below.
also tried with item-left and item-right properties. but cant able to do.
Try this:
<ion-item>
<ion-icon item-left name="phone-portrait"></ion-icon>
<ion-input type="text" placeholder="Mobile no"></ion-input>
<ion-icon item-right name="contacts" (click)="pickContactNo()"></ion-icon>
</ion-item>
You will probably have to override some of the css in the elements of ion-grid otherwise.
UPDATE From ionic#3.4.0 :
Thanks to #keldar for the comment. According to the docs,directional properties item-left and item--right are deprecated and you would need to use item-start and item-end which would allow to support both Right to Left and Left to Right.
<ion-item>
<ion-icon item-start name="phone-portrait"></ion-icon>
<ion-input type="text" placeholder="Mobile no"></ion-input>
<ion-icon item-end name="contacts" (click)="pickContactNo()"></ion-icon>
</ion-item>
ion-row has several attributes (see Row). The one that looks suitable for you is align-items-center.
So, you can try this:
<ion-grid>
<ion-row align-items-center>
...
if you add new col, it mean that will be another column and you don't have unspecified the dimensions of these
When you add
you can insert one ion-item to insert everything on the same line without static sizes.
<ion-item>
<ion-icon item-start name="phone-portrait"></ion-icon>
<ion-input type="text" placeholder="Mobile no"></ion-input>
<ion-icon item-end name="contacts" (click)="pickContactNo()"></ion-icon>
</ion-item>
Related
I am using ionic 2 and I would like to get a result like this:
For now, I have a simple ion-list :
<ion-list radio-group formControlName="type">
<ion-col col-4 >
<ion-item>
<ion-label>Breakfast</ion-label>
<ion-radio value="breakfast" ></ion-radio>
</ion-item>
</ion-col>
<ion-col col-4 >
<ion-item>
<ion-label>Diner</ion-label>
<ion-radio value="diner" checked="true">
</ion-radio>
</ion-item>
</ion-col>
<ion-col col-4 >
<ion-item>
<ion-label>Lunch</ion-label>
<ion-radio value="lunch" checked="true">
</ion-radio>
</ion-item> </ion-col>
my result :
thanks
You need to implement Ionic Segment to get the expected result.
have a look Ionic-Segment
I'm trying to use an *ngIf conditional on a button in order to disable it if a text input area is empty, but there doesn't seem to be a straightforward way to access that input value.
<ion-item>
<ion-label fixed>Venue</ion-label>
<ion-input type="text" id="venue" [(ngModel)]="event.venue" class="form-control" maxlength="22" required></ion-input>
</ion-item>
<button ion-button block id="addEventButton" *ngIf="//not sure what to do here// " (click)="addEvent();">Add Event</button>
Yeah this will work
<button ion-button block id="addEventButton" [disabled]="!event.venue"></button>
I have a form in my Ionic 2 project that has 2 ion-select dropdowns. When the user selects an option in the 1st dropdown it generates the options of the 2nd dropdown. This works fine. My question is, if the user changes their selection for the 1st dropdown the selected 2nd option does not clear out. How do I get it to clear so the user is not confused about the options for the new select?
<ion-item>
<ion-label>
<img height="100" src="assets/img/customer.png" alt="Customer"/>
</ion-label>
<ion-select [(ngModel)]="customer" name="customer" (ionChange)="addBuildings(customer);" placeholder="Customer">
<ion-option *ngFor="let customer of customers" value="{{customer.name}}">{{customer.name}}</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>
<img height="100" src="assets/img/building.png" alt="Building"/>
</ion-label>
<ion-select [(ngModel)]="building" name="building" placeholder="Building">
<ion-option *ngFor="let building of buildings" value="{{building.name}}">{{building.name}}</ion-option>
</ion-select>
</ion-item>
I solved this by using the ngModel and setting it to null in the .ts at the beginning of the .addBuildings() function.
I want to disable buttons when fields are empty.
Template:
<ion-content padding text-center class="product">
<ion-item>
<ion-input placeholder="Product" type="text" [(ngModel)]="product.productName"></ion-input>
</ion-item>
<ion-item>
<ion-input placeholder="Price" type="number" [(ngModel)]="product.price"></ion-input>
</ion-item>
<button ion-button block (click)="checkPrice()" [disabled]="!(product.price && product.productName) ? true : null">Сравнить цену</button>
<button ion-button block (click)="addToReceipt()" [disabled]="!(product.price && product.productName) ? true : null">Добавить в чек</button>
When I run this on browser - data binding works fine.
when I run this on device - data binding does not work:
I think you can do this using <form> and required in <ion-input> like:
<ion-content padding text-center class="product">
<form #demoForm="ngForm">
<ion-item>
<ion-input placeholder="Product" type="text" [(ngModel)]="product.productName" required></ion-input>
</ion-item>
<ion-item>
<ion-input placeholder="Price" type="number" [(ngModel)]="product.price" required></ion-input>
</ion-item>
</form>
<button ion-button block (click)="checkPrice()" [disabled]="!demoForm.form.valid">Сравнить цену</button>
<button ion-button block (click)="addToReceipt()" [disabled]="!demoForm.form.valid">Добавить в чек</button>
Just an example. You need to check other parts/conditions in your code if you have any.
I am developing a Mobile App using the Ionic2-Framework along with Angular2.
In a section of my app, I have several <ion-slides> with <ion-item><ion-input ...></ion-input></ion-item> on the slides.
When changing the slide, the keyboard opens up without actively touching one of the input-fields. So far, I could only test it on iOS, but I found out that it only happens for type="tel"-inputs
Is there a way to prevent the app from doing this, as I would like the users to choose the time to input by themselves.
The code of my page looks like that:
(I excluded some parts for readability)
<ion-header>
<ion-navbar>
<button ion-button icon-only menuToggle [hidden]="showBackButton">
<ion-icon color="primary" name="menu"></ion-icon>
</button>
<button color="light" ion-button icon-only [hidden]="!showBackButton" (click)="goToPreviousSlide()">
<ion-icon color="primary" name="arrow-back"></ion-icon>
</button>
<ion-title>Title</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-slides (ionSlideDidChange)="updateShowBackButton()">
<!-- Some more slides... -->
<ion-slide style="background-color: white" padding>
<h2 class="slide-title">Hello {{person.name}}!</h2>
<p>Now I need this and that information:/p>
<ion-item>
<ion-label>Day</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.day"></ion-input>
</ion-item>
<ion-item>
<ion-label>Month</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.month"></ion-input>
</ion-item>
<ion-item>
<ion-label>Year</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.year"></ion-input>
</ion-item>
<ion-item-divider></ion-item-divider>
<ion-item>
<ion-label>Height (cm)</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.height"></ion-input>
</ion-item>
<ion-item>
<ion-label>Weight: (kg)</ion-label>
<ion-input type="tel" fixed [(ngModel)]="person.weight"></ion-input>
</ion-item>
<button ion-button block (click)="goToNextSlide()">Next</button>
</ion-slide>
<!-- Some more slides... -->
</ion-slides>
</ion-content>
If you need futher information, please let me know! I am appreciating any hints! :)