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?
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
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'm trying to give my app a full-sized background. But I don't really know where to put it because wherever I put the image the navbar hasn't the background.
So I tried to surround my ion-content and my ion-footer with a <div> and hoped to give it the background-class. but in this case nothing I can't see anything on the screen. Right now my background is only inside the ion-content and the footer is still empty. How can I change it?
My code:
<ion-content class="bg-image" padding>
</ion-content>
<ion-footer>
<ion-toolbar>
</ion-toolbar>
</ion-footer>
Just like you can see in the docs, you need to add the fullscreen property to the ion-content:
<ion-content fullscreen="true">
<!-- ... -->
</ion-content>
If true, the content will scroll behind the headers and footers. This
effect can easily be seen by setting the toolbar to transparent.
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.
I am designing screens using jquery mobile.
I'm not able to scroll horizontally and i used the following meta tag for view port settings.
How to get the horizontal scrollbar?
You can limit the width of the div tag and then declare overflow scroll on the div:
<div style="width:200px; overflow:scroll" ></div>
There are serious cross-platform short-falls with using overflow=scroll in a mobile environment. I have had success with implimenting iScroll: http://cubiq.org/iscroll-4
I know that iScroll works on iPhone and Android devices from my own testing.