I am new to Ionic. I want to design a carsharing application. I want to make a "Choose a destination" dropdown menu, with frequent options (like "Here", "Home", or "Anywhere") and a special "Choose a destination" option.
This option would ideally look like another dropdown menu (with the little triangle) and would open a modal with an input that would allow to pick an address (I'm not there yet, I would have to interface with google map or OSM... anyway).
I tried the following code
<ion-card>
<ion-card-header>
Where are you going?
</ion-card-header>
<ion-card-content>
<ion-item>
<ion-label>Destination</ion-label>
<ion-select [(ngModel)]="destination">
<ion-option>Here</ion-option>
<ion-option>Home</ion-option>
<ion-option>Work</ion-option>
<ion-option>
<ion-item>
<ion-label fixed>Choose a destination</ion-label>
<ion-select [(ngModel)]="destination_chosen">
</ion-select>
</ion-item>
</ion-option>
<ion-option>Anywhere</ion-option>
</ion-select>
</ion-item>
</ion-card-content>
</ion-card>
But it looks like it's not taken into account. What do I do wrong? Is it even possible? If not, would anyone have an idea of a good UX pattern to use in that case?
A simple solution would be to change the view of the modal to show the actual dropdown menu you want whan that option is selected as if it was a second step. A second different modal would not be ideal since putting a modal inside another modal is not a good UX practice. As it is part of a various-steps process, it won't feel odd.
So, instead of being part of the same view, you would have to createe a second one, should be simple enough with JS or even easier with Angular. A simple ng-show condition should do it.
Related
I'm working on a form. One of the fields must ask the user to choose an image from a selection. I would like to achieve a similar result.
So I thought of an <ion-select> which would have a corresponding <ion-select-option> for each image, like this
<ion-item>
<ion-label>Images</ion-label>
<ion-select>
<ion-select-option>
<ion-img value="image1" src="https://via.placeholder.com/150"></ion-img>
</ion-select-option>
<ion-select-option>
<ion-img value="image2" src="https://via.placeholder.com/150"></ion-img>
</ion-select-option>
</ion-select>
</ion-item>
but I get the following result.
The problem is that the images are not displayed and that the ion-select dialog box is not very suitable for image selection. So I don't know if another ionic component would do a better job or if I should choose a non-ionic solution...
It is not possible to add images in ion-select-option but you can achieve the same thing by your own by :
create a page and make normal ion-list with a ngfor and inside
each item put an image and before it a radio button for single
choice or checkbox for multichoice.
open this page as modal and give this modal custom css in golobsl
.scss file as normal select alert like (width:450px;height:350px;).
when you open the modal send array that will contain images or
api link to requested when modal opens.
get the props of modal that is sent with it with navParams and
but that you will get what you wanted exactly.
And for any more info write a comment and will be with you anytime.
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 :)
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
Using the following markup:
<ion-list>
<ion-item>
<ion-label></ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-label></ion-label>
<ion-input></ion-input>
</ion-item>
</ion-list>
It adds weird :last-child styling for the borders, which is even found in the documentation:
Notice how the password's border doesn't align like the username field's. Is there a reason for this behavior? Is there a way to change it [easily] without having to go through a ton of styles, i.e. selectors like this:
.item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus):last-child
I am not sure if it is something they have done intentionally or accidentally, but to overcome this quickly whilst I have a ticket outstanding with them I did the following
I created a new ion item at the bottom of the list to act as the last item, then just set the display none on it.
This fixes the border issue for me as it is then applied to the hidden last ion item.
Ticket - https://ionic.zendesk.com/hc/en-us/requests/5283
I have my simple application using Ionic Framework.
It looks like :
Here the list code :
<ion-list show-Reorder="data.showReorder">
<ion-item class="item-avatar item-icon-right" ng-repeat="band in bands" type="item-text-wrap" href="#/bands/{{auth.profile.name}}/{{band.id}}">
My problem is, when I try to scroll the list up and down, it always shows blur on the selected list, and it makes the view when doing scrolls is not smooth enough.
I can solve that blur problem, but I lose the list ng-click and href capabilities, like
<ion-list show-Reorder="data.showReorder">
<ion-item class="item-avatar item-icon-right" ng-repeat="band in bands" type="item-text-wrap">
How to resolve that blur problem without losing ng-click and href capabilities, in order to make scrolls are smoother?
Try using ui-sref instead of href. If this doesn't work create an anchor link inside your ion-item and redirect through it. Hopefully this will solve your problem.