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
Related
I am experiencing the following when having an ion-list within an ion-content:
At first I thought that the ion-refresh was causing this bug, but now that I removed it, it is still there.
So I have an ion-content and in there an ion-list. If I now go to the top of the page and i scroll the content a bit down, i can no longer scroll the ion-list, it even seemed to be cut off.
This happens on iOS - anybody any idea?
Theres not really code to show or any styles, as there are none.
<ion-content>
<ion-list>
</ion-list>
</ion-content
I have a page which contains ion-slides with loop enabled. Each slide is generated with *ngFor and each one contains a checkbox. The problem I am facing is that the checkbox is not getting checked on first and last slides. I have found that its because there are duplicate slides for the first slide and last slide so clicking on the checkbox is not triggering it since there are duplicates for the same. I have tried giving Id to checkbox to make it unique but since the slides are generated dynamically whatever change I give is also getting replicated. Is there any workaround for this? Any help is much appreciated.
Thank you
Here is my code
HTML part
<ion-slides pager='true' loop="true">
<ion-slide *ngFor="let slide of demoData">
<ion-card>
<ion-card-header>{{slide}}</ion-card-header>
<ion-card-content>
<ion-checkbox></ion-checkbox>
</ion-card-content>
</ion-card>
</ion-slide>
</ion-slides>
Ts Part
demoData = ['1', '2', '3'];
In my application I've got an ItemReorder as described in the docs:
<ion-list reorder="true">
<ion-item *ngFor="let item of items">{{ item }}</ion-item>
</ion-list>
It works as intended, I can drag the ion-items by pointing at the reoder icon (see freehand circle):
Testing with potential users on a tablet I found out, many users don't see the icon at first and/or try to drag the ion-item without pointing at the icon. They expect the whole ion-item to be draggable:
How can I implement this? Any insight is appreciated!
I've already checked the docs twice, googled and found this unanswered question on the ionic forum and this plugin for Ionic v1. I also scanned the code on Github without success.
The ideea of this css solution is to have the reorder icon invisible above the zone which you want to reorder. I have changed the icons to be on the right side <ion-list side="start" and I have changed the css like this
Now for me it's working.
ion-reorder{
position: absolute;
width: 22%;
max-width: 100%;
opacity: 0;
}
The cons is that there is no more visible reorder icons.
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.
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.