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.
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'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.
I have a component which makes use of the ionic component ion-slides but when I test this on mobile the slides are scrolling 1 per 1. This looks really snappy when you do a harder scroll.
What you expect that the slides do is smoothly scroll through your slides when you do a harder scroll than just one.
In web the scroll is working like it should, but on mobile it feels really snappy.
Here is a reproduced stackblitz:
https://stackblitz.com/edit/ionic-aecpl2
And this is the original home.html:
<ion-content overflow-scroll="true">
<ion-grid no-padding fixed class="s-margin-l">
<mm-restaurant-slide-card [restaurantList]="restaurantsList" class="mb-2"></mm-restaurant-slide-card>
</ion-grid>
</ion-content>
I hope someone could tell me if this is a familiar problem on android mobile phone?
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
Im having a hard time understanding how Ionic handles ion-nav-view vs. ion-view. I'm trying to build an app where the views are not nested (as example apps). This is what I've done
In index.html I have an ion-nav-view
I have 3 pages. 1 login, 1 list, and 1 item (item is a list item beeing clicked)
My list page is an ion-side-menus while the other 2 are ion-view's
Now to my question
When I click an item in my list I get a transition to my item page but when I go back to my list there is no page transition. This is the HTML
<ion-header-bar class="bar-dark">
<div class="buttons">
<button nav-transition="slide-left-right" class="button button-icon button-clear ion-android-arrow-back" ui-sref="list">
</div>
<h1 class="title">Item</h1>
</ion-header-bar>
How can I get transitions to work even though each page is its own ion-view?
EDIT
I solved the "transition back" using nav-direction="back"
Next problem is that transition only works ones from the list?
If i click the above the slide left transition occurs, but if I go back and press it again I don't get a transition? Is it some sort of cache?
The way I do is to have ion-side-menus inside index.html as the only directive, and inside it and with an ion-nav-view inside.
Then define an ion-side-menu with side="left" and include the list you want to show.
That way you can define a side-menu that will show throughout the whole app and be available with all the content you need.
Now to answer your question, I think the list page (in your case the one with ion-side-menus) does not have transition when going back because it is now an ion-view. The page transitions occur on ion-views when they are swapped in-out inside the . But the ion-side-menus page is not swapped in-out it's just there.
Regarding this:
EDIT I solved the "transition back" using nav-direction="back"
It worked because you explicitly told ionic that you want a nav-transition when going back.
Hope this helps a bit