This question already has an answer here:
Icon not displayed inside input line in Ionic 3
(1 answer)
Closed 5 years ago.
In my Ionic2 project when using the floating label, it is not correctly aligned with the input box. How can I fix this?
Following is the code:
<ion-item>
<ion-label floating><ion-icon name="person" item-start></ion-icon>Email</ion-label>
<ion-input type="email" name="email" [(ngModel)]="registerCredentials.email"></ion-input>
</ion-item>
This is not a duplicate question. The one it is compared to is about keeping the label floating and icon fixed. This is an alignment related question.
could you please share the code?
If you use the ion-item and ion-label like this, the text is correctly aligned:
<ion-item>
<ion-label floating>Username</ion-label>
<ion-input></ion-input>
</ion-item>
Input no selected
Input Selected
Related
We are trying to put checkbox and a button in the same row for our android application. We are using Ionic 4 and Cordova 9 to build the Andriod Application.
so we have used the following code snippet:
<ion-content>
<ion-item-sliding *ngFor="let test of testList">
<ion-item>
<!-- check box to select user-->
<ion-checkbox color="secondary" [(ngModel)]="test.testId"
(click)="selectUser(test .testId )" ng-true-value="right" ng-false- value="wrong" > </ion-checkbox>
<!-- button to view user-->
<ion-label text-wrap>
<h3>Test</h3>
<p>Test</p>
<button ion-button color="danger" block (click)="viewUser(test .testId )">View User</button>
</ion-label>
</ion-item>
</ion-item-sliding>
</ion-content>
When we click on button then Checkbox click event is being triggered.
Even if we click anywhere in the row in that case Checkbox click event is being called.
Any help would be much appreciated.
Thanks in advance.
I inspected the ion-checkbox element and result that is a bug, or precisely an error of implementation by ionic, ionic bug report.
In short, inside ion-checkbox there is a button that trigger the event click, but the button have css properties to take all width and height of ion-item, and this button is inside of "shadow DOM", so is difficult override its properties.
But if you need a fix temporally.
I saw that this button inside ion-checkbox have a z-index: 2 property, so give a z-index: 3 to ion-label, and with this the space of button not will trigger, but the space of checkbox still work.
add on your .scss of your page
ion-label{
z-index: 3;
}
Also, a recommendation is to disable to effect when click the space of ion-item, that will improve the UX, because show that effect when click on white space and don't trigger an action is bad.
EDIT
My versions of the framework.
I hope I've helped :)
The reorder function seems to be attaching reorder icons to all the nested items within my ngFor list. So with 2 items being a checkbox and a text-input, I get 2 extra (3 total) reorder icons per list item. Only one of them works, the other two are just visual. I need to remove the other 2 and just have one clean reorder icon per item, or something to that effect.
I have tried removing the nested items, but the checkbox and text-input don't work.
/// Here is the HTML ///
<ion-list no-lines [reorder]="reorderIsEnabled" (ionItemReorder)="itemReordered($event)" id="lowtrimlist">
<ion-item-sliding *ngFor="let task of tasks; let taskIndex = index">
<ion-item>
<ion-row>
<ion-col col-1>
<ion-item no-lines>
<ion-checkbox></ion-checkbox>
</ion-item>
</ion-col>
<ion-col col-11>
<ion-item>
<ion-textarea>
</ion-textarea>
</ion-item>
</ion-col>
</ion-row>
</ion-item>
<ion-item-options side="right">
<button ion-button color="danger"(click)="delete()">
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
What I'm looking for is there to be one single reorder icon per line item, but instead there are 3. It seems like the reorder function picks up and tries to label every internal item.
Follow an Ionic 4 tutorial
Based on your comments it's not clear where you have got your method from but it's not what the documentation says, and it's not what I have seen before.
I suspect you are using some kind of legacy support mode from earlier version of Ionic.
I actually just learned to use ion-reorder myself recently and I followed this tutorial:
https://www.freakyjolly.com/ionic-4-ion-reorder-list-drag-drop-sorting-list-in-ionic-4-using-ion-reorder-component/
Did you paste the right html snippet?
I would expect to see a combination of ion-reorder-group and ion-reorder like this:
<ion-list>
<ion-reorder-group (ionItemReorder)="onReorderItems($event)" [disabled]="!isGameRunning">
<ion-item *ngFor="let item of listItems" [class]="item?.cssClass">
<ion-label>{{ item?.name }} </ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
</ion-reorder-group>
</ion-list>
Test
As a test I just put an extra ion-item inside the ion-item above and ran it in a little game I made recently:
<ion-list>
<ion-reorder-group (ionItemReorder)="onItemReorder($event)" [disabled]="!isGameRunning">
<ion-item *ngFor="let item of listItems" [class]="item?.cssClass">
<ion-label>{{ item?.name }} </ion-label>
<ion-item>inner item</ion-item>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
</ion-reorder-group>
</ion-list>
It rendered ok:
Implementing programmatically?
All of this is leading me to think that its a coding error. Are you trying to implement the reordering programmatically?
Please share your snippet but you just need to use the ion-reorder-group, ion-reorder and disable="false" to display it.
When I click on the label of an ion-item the checkbox is triggered.
I want to find a way of preventing this from happening as I want to trigger another function when clicking the label.
I found this answer for Ionic 3: https://forum.ionicframework.com/t/solved-can-i-disable-a-checkbox-from-activating-when-clicking-on-a-label/95120
However, it is not working for Ionic 4.
<ion-item>
<ion-icon [name]="setIconDoc(item.document.documentType)" color="primary" (click)="editDocument(item.document)"></ion-icon>
<ion-label padding-start color="none" (click)="editDocument(item.document)"> {{ item.document.customer.name }}
</ion-label>
<ion-checkbox slot="end" color="success" [(ngModel)]="item.isChecked">
</ion-checkbox>
</ion-item>
I'd like to have two behaviors:
- When clicking in the Checkbox trigger just the checkbox.
- When clicking on the label or the icon open a modal to edit my document.
I just had a similar problem and found a nice solution for it in ionic 4 by using the slots of ion-item.
<ion-item lines="full">
<ion-icon slot="start" name="at" (click)="iconClicked()"></ion-icon>
<ion-label slot="start" (click)="labelClicked()">
This is a separately clickable label
</ion-label>
<ion-checkbox slot="end"></ion-checkbox>
</ion-item>
Explanation
The elements in the start slot of the ion-item are not triggered when clicking the checkbox.
The start slot has no bottom border by default so it must be set by adding lines="full" to the ion-item;
Be aware, that the main slot still is rendered with a large width. That may lead to some hidden content. In this case this can be fixed with a css tweak like this.
ion-item ion-label {
overflow: visible;
}
I found another solution. I added another hidden checkbox in the item.
<ion-item *ngFor="let task of tasks;let i of index;" padding margin>
<ion-checkbox slot="start" color="success" (click)="DeleteTask($event, task)"></ion-checkbox>
<!-- another checkbox otherwise item clicks triggers checkbox click -->
<ion-checkbox hidden=true ></ion-checkbox>
<ion-label >
{{task.Name}}
</ion-label>
<ion-reorder slot="end"></ion-reorder>
You can also wrap the checkbox in a slotted div, which appears to break the link between the item and the checkbox.
<ion-item (click)="itemHandler()">
<ion-icon />
<ion-label>Label</ion-label>
<ion-checkbox (click)="checkboxHandler()" />
</ion-item>
If you put the click handler on the ion-item then it will handle clicks from anywhere on the ion-item. However, that includes clicks from the checkbox, so you have to make sure to also call event.stopPropagation() in the checkbox click handler.
Good day all
I am building my first ionic 4 mobile application, and have a question about how label, icons and other elements can be connected to a form input.
In normal HTML forms you have a relationship between labels and inputs using the "for" attribute, like so:
<label for="name">Please enter name</label>
<input type="text" id="name" name="name"/>
With this relationship in place the input field gains focus when you either click on the label or on the input itself to gain focus on the input.
In ionic you use ion-label and ion-input instead of the default HTML form elements, and these seem to not share this capability.
I am specifically interested in using an icon as the aforementioned label. I tried the following without any success:
<ion-item>
<ion-label for="searchText">
<ion-icon name="search"></ion-icon> <!--name here refers to the icon displayed-->
</ion-label>
<ion-input id="searchText" name="searchText" type="text" placeholder="Search" ></ion-input>
</ion-item>
Is there something similar that one can use, or do I need to use JavaScript to achieve this?
Any advice would be greatly appropriated
So since I've been asked for a solution by someone else, let me post the workaround that I used:
I never managed to find a way to automatically add this kind of functionality like in a normal form, I did manage to trigger a click event on the icon that then caller a JavaScript function to give focus to my input field. It looks something like this:
HTML:
<ion-item color="light" class="white-iput" lines="none" (click)="focusSearch()">
<button (click)="focusSearch()" class="icon-button">
<ion-icon name="search" color="primary" for="searchText"></ion-icon>
</button>
<ion-input #input id="searchText" type="text" placeholder="Search" ></ion-input>
</ion-item>
JS (in my Type Sctipr file):
#ViewChild('input') searchInput: { setFocus: () => void; } ;
...
focusSearch() {
this.searchInput.setFocus();
}
Note that I call the "focusSearch()" function if you click anywhere in the "ion-item" wrapped around the icon and the text box, as I use CSS to have the whole thing display as a single textbox.
Hope this helps!
I need a routine on Ionic that calls the cellphone's Keyboard to an ion-input when entering the page.
An example of a page would be:
<ion-content padding>
<form>
<ion-row>
<ion-col>
<ion-input #user name="user" type="text" placeholder="Usuário"></ion-input>
</ion-col>
</ion-row>
</form>
</ion-content>
What I want is to use the Navigating Lifecycle from Ionic (I believe that in this case using the ionViewDidEnter) to bring the focus and the Keyboard in the field automatically, I have already tried some codes but unfortunately sometimes it works and sometimes not, thank you right away.
You can set focus in your textarea in the method ionViewDidEnter and show the keyboard by using keyboard plugin of ionic.
#ViewChild('user') input ;
ionicViewDidEnter(){
setTimeout(() => {
this.input.setFocus();
},150);
this.keyboard.show();
}
I have referred the following links. Please go through it for more information:
https://ionicframework.com/docs/native/keyboard/
https://forum.ionicframework.com/t/setting-focus-to-an-input-in-ionic/62789/4
Set focus on an input with Ionic 2