I have an ionic 2 app that I use a couple of tabs as shown below:
<ion-tabs color="dark" [selectedIndex]="index" class="right-align">
<ion-tab [root]="homePage" tabTitle="Home" tabIcon="home" ></ion-tab>
<ion-tab [root]="aboutPage" tabBadge="{{itemCount}}" tabTitle="About" tabIcon="ios-cart" tabBadgeStyle="danger"></ion-tab>
</ion-tabs>
By default these two tab icons are centered on the page, is it possible to align these tab icons to the right and reduce the gap between both the icons?
There's an attribute for the ion-tabs tag to change the icon position:
<ion-tabs tabslayout="icon-end"> ... </ion-tabs>
The icon-end value will push your icons to the right.
About the gap you need to be more clear of what gap this is. Between the tab buttons there's only 4px of padding split by the two buttons, it's not a big gap, but you can add more padding to the icon so it can be pushed far to the right.
Hope this helps.
I'm using ion-select component in a form, but got a problem: if users selects one option, but then wanna remove it, it doesn't give the option. I could add a <ion-option> with blank value, but think it wouldn't be nice. Is there a better way to solve that?
EDIT:
This is how my select options looks right now:
If the users selects one option and then changes his mind and don't wanna select any option, it doesn't seems pretty clear the way he can do that. Even if add a "Remove Option" with blank value, it still looks like an option, doesn't seems nice to me. With a traditional select, the blank option without a text seems pretty intuitive. But in this case, I was thinking in something like a " (X) Remove selected", near to "Cancelar/Confirmar" options in the footer, or something like that. Any ideas?
Ps: also, ion-option seems to strip any html tag I put on my option, so it keeps pretty tough to format my "select none" option
#sonu's solution will work if the user wants to click on the ion-select again and chose a select-nothing option, but I don't find that a pleasant experience.
An alternative way to get to what you want is to use a small clear button next to your ion-select, which appears only when user has already selected something:
<ion-label>Options</ion-label>
<ion-select [(ngModel)]="option">
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
<div *ngIf="option=='m' || option=='f'">
<ion-label> {{option}} </ion-label>
<ion-button (click)='removeSelection()'>
<ion-icon name='close'></ion-icon>
</ion-button>
</div>
Where removeSelection() is a function that changes the selection to "No selection", perhaps by setting this.option=null.
Of course, you can style this button as you wish. You may also want to look at ionic chips. In particular, delete chips are one way to implement your intention.
To trigger a function that handles the cancel selection you can just use the ionCancel attribute like this
<ion-select okText="Select" cancelText="Clear"formControlName="selectionValue" (ionCancel)="clearSelection()">
<ion-option *ngFor="let selection of selections" [value]="selection.value">{{selection.description}}</ion-option>
</ion-select>
And in the code just implement the function you declared; in this case clearSelection()
clearSelection() {
this.myModel.selectedValue = null;
}
Now every time you press the clear button your function will be triggered
Documentation: ion-select
I had a slight different requirement - after selecting an option and clicking on OK button, the selected value should be used in function called by ionChange and then selected option in ion-select should get deselected. I tried various solutions mentioned in various sites but none worked. Even the working solution in plunker http://embed.plnkr.co/2KVqL2ecColaXgzAfxWI?p=preview where the ngModel value is set to null didn't work for me.
So I tried myself different things and one them did the trick. Below is the way that worked for me:-
In HTML I have used #languageSelect as template reference variable for ViewChild in ion-select
<ion-label>Select Language</ion-label>
<ion-select #languageSelect (ionChange)="langSelected($event)">
<ion-option *ngFor="let lang of languages" [value]="lang">{{lang}}</ion-option>
</ion-select>
And in ts file it is used as
#ViewChild('languageSelect') languageSelect: Select;
In langSelected() it is cleared after doing the needful.
langSelected(value) {
//used the value as required
...
...
this.languageSelect.setValue(''); // This is clearing the selected option in ion-select
}
It's better way to have option with blank value.You can use code as per ionic docs
example:
<ion-label>Gender</ion-label>
<ion-select [(ngModel)]="gender">
<ion-option value="">Select Gender</ion-option>
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
Or you can add any event for selection clear.
The template:
<ion-item>
<ion-label stacked>Select clickable option texts</ion-label>
<ion-select>
<ion-option value="opt1"><a (click)="myDetails()">Option one description<a> text</ion-option>
</ion-select>
</ion-item>
As you can see above, I want to make certain parts of the text in clickable, like to show the definition. I am using toast to show the text. But I am unable to get my head around making part of the text actually clickable.
Is there a way?
When I run 5 tabs on an ionic 2 app in an iphone 5s emulator, it has wide margins between the icons and it cuts off the first and last icon off screen. It looks fine on the browser set to a smaller screen width so it looks like it should fit. It also looks fine on an iphone 6 emulator. Is this a bug in the ionic 2 beta css?
<ion-tabs>
<ion-tab [root]="tabFavesRoot" tabTitle="Faves" tabIcon="heart"></ion-tab>
<ion-tab [root]="tabPeopleRoot" tabTitle="People" tabIcon="people"></ion-tab>
<ion-tab [root]="tabHostGameRoot" tabTitle="Create" tabIcon="add-circle"></ion-tab>
<ion-tab [root]="tabMessagesRoot" tabTitle="Messages" tabIcon="chatbubbles"></ion-tab>
<ion-tab [root]="tabMyProfileRoot" tabTitle="My Profile" tabIcon="person"></ion-tab>
</ion-tabs>
Does anybody know how to change the size of the fonts appearing in tags of the tag-it plug in? I went over the stylesheet but it does not seam obvious to me how to do it.
It is in the color specifc css file, tagit-stylish-yellow.css for example.
Look for
ul.tagit { cursor: text; font-size: 14px; color: #333; }
and change the font-size.
I found this by going to the demo site in Chrome, start the inspector by pressing F12, selecting the tag and looking at the css directives that affect it.