I am using the Ionic Accordion List from here and I have an issue with the screen height (this official example also has that problem), when you open an accordion the screen height remains the same as before when it was closed so when you try to scroll it doesn't go further down for example.
If you try a second time to scroll usually it does but other times you need to touch-drag a specific area so you can scroll.
<ion-list>
<div ng-repeat="group in groups">
<ion-item class="item-stable"
ng-click="toggleGroup(group)"
ng-class="{active: isGroupShown(group)}">
<i class="icon" ng-class="isGroupShown(group) ? 'ion-minus' : 'ion-plus'"></i>
Group {{group.name}}
</ion-item>
<ion-item class="item-accordion"
ng-repeat="item in group.items"
ng-show="isGroupShown(group)">
{{item}}
</ion-item>
</div>
</ion-list>
Its been very long and not sure whether you already fixed this issue.
Based on my understanding, i think that there is some delay in triggering the resize event.
Not sure about the permanent solution but for temporarily we have the invoke by $ionicScrollDelegate.resize().
I hope this works for you and please let me know if am wrong. Also please do share if you find any alternative solution for this problem.
I was experiencing a similar accordion reflow issue and was able to resolve the same by calling $ionicScrollDelegate.resize() in the accordion toggle (show/hide) function.
Related
I'm having trouble with the Ionic 3.3.0 virtual scroll due to the fact that I have a ~360 items array and it only displays the first 15 on the phone. Has anyone encountered this issue?
P.S.: The virtual scroll list is in a container that has 35% of the screen height. Don't know if this has an effect on the issue or not...
this.friendsList = [{name: 'John'},...,{name: 'Zed'}];
<div class="friends-list__container">
<ion-list [virtualScroll]="friendsList">
<ion-item *virtualItem="let friend">
{{friend.name}}
</ion-item>
</ion-list>
</div>
After researching the issue, it seems that the solution was to add an extra DIV wrapper around the virtual scroll list:
<div class="friends-list__container">
<div> <!-- This is needed for the virtual scroll to work properly -->
<ion-list [virtualScroll]="friendsList">
<ion-item *virtualItem="let friend">
{{friend.name}}
</ion-item>
</ion-list>
</div>
</div>
I am a newbie to Angular/Ionic. I have a ionic list created as follows. I want to Display/Hide an item in list depends on a value in item.display varaible. My code is shown as below
<ion-list id="item-list7" ng-repeat="item in items track by $index" >
//below item should display or hide with respect to value in item.display
<ion-item id="item{{item.id}}" class="item-thumbnail-left assertive" >
{{item.item_name}}
</ion-item>
<ion-list>
Thanks in advance. Any help will be appreciable.
Simply use ng-show/ng-hide, like this:
ng-show
<ion-item ng-show="item.display" id="item{{item.id}}" class="item-thumbnail-left assertive" >
ng-hide
<ion-item ng-hide="!item.display" id="item{{item.id}}" class="item-thumbnail-left assertive" >
.
You can also use ng-if to hide an element but beware: it will also remove it from the DOM.
ng-if
<ion-item ng-if="item.display" id="item{{item.id}}" class="item-thumbnail-left assertive" >
I'm using ionic and angularJS in my application, I need to expand and collapse list view. As of now I created the list view using ion-list and ion-item without expand and collapse. Please find the code and snap below.
<ion-view view-title="Call Lists">
<ion-content class="padding">
<ion-list show-delete="false" can-swipe="true">
<div class="list card-ScheduledCalls">
<!-- Task # -->
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="item in callItems" type="item-text-wrap" ng-click="doTask()">
<img ng-src="{{item.imgSrc}}">
<h3>{{item.callCount}}</h3>
<h3>{{item.callDate}}</h3>
<p style="color:white;">{{item.callCmt}}</p>
<p style="color:white;">{{item.callType}}</p>
<p style="color:white;">{{item.assetType}}</p>
<p style="color:white;">{{item.requestedBy}}</p>
<p style="color:white;">{{item.issueType}}</p>
</ion-item>
</div>
</ion-list>
</ion-content>
</ion-view>
Now I have more details in the each list for eg: EmpName, BloodGroup, EmpTodayTaskName, TaskTime, TaskDuration, TaskComments, etc. First I will show only three fields in the list, If a user clicks the more button (mentioned in the image) I will show remaining details.
At the same time, I'm having tapping (ng-click) functionality to go next page so I restrict the user that If they select the more button only to do expand and collapse other touches it will move into next page.
How can I handle this activity in ionic and angular ?
If I understand this correctly, the app needs to go to the next page if the content inside of the ion-item is clicked. If so, why not to wrap ion-item content inside some container, for example div, and attach the required ng-click there
I have a view in ionic which has an image at the top and a scrollable list of messages. I want the image to stay on the screen while the list can be scrolled. Here is my current code:
<ion-content scroll="false">
<img src="/myimage.png">
<ion-scroll direction="y" style="height: auto;" delegate-handle="postScroll">
<div class="list">
<a class="item item-avatar" ng-repeat="post in posts">
<img ng-src="myimage.png">
<h2>{{post.title}}</h2>
<p>{{post.content}}</p>
</a>
</div>
</ion-scroll>
</ion-content>
This works pretty well, i.e. the scroll does work and the image stays in place. But I am having trouble setting the height. If I have 100 posts, for example, I can only see 2-3 since the height container is not nearly large enough. Am I doing this correctly? How can I set a variable height for the number of posts? The user can add posts dynamically so this height needs to be able to change.
I leave these codepen which will help you!
<ion-scroll direction="x" zooming="false" delegate-handle="horizontal2" horizontal-scroll-fix="mainScroll">
example 1
example 2
I have three cases:
1.- If I use item-remove-animate (it animates the delete action) and ui-sref (it makes the item clickable to send the user to another view), when I delete an item, it gets deleted but also, the ui-sref redirect is triggered.
2.- If I remove the animation class 'item-remove-animate", it works as I expect, the item is deleted and I'm still on the same view. The problem is that the items are deleted instantly, I would like to conserve the animation.
3.- If I remove the ui-sref, the animation works as expected but I lose the redirect.
Here it is the complete view I'm using, in the first case:
HTML:
<ion-view title="Bimbo Keepers">
<ion-nav-buttons side="left"><a ng-click="onShowDeleteIcons()" ng-if="reportes.length" class="button button-icon icon ion-minus-circled"></a></ion-nav-buttons>
<ion-content padding="true" class="has-bottom-icons">
<div class="row">
<h1>Enviados</h1>
</div>
<ion-list show-delete="data.showDelete">
<ion-item ng-repeat="reporte in reportes.slice().reverse()" type="item-text-wrap" ui-sref="tab.detail-enviados({id: reporte.id})" class="item-thumbnail-left item-icon-right item-remove-animate item item-complex item-left-editable item-right-editable">
<ion-delete-button ng-click="onReporteDelete(reporte)" class="ion-minus-circled"></ion-delete-button>
<img ng-src="{{ reporte.imagen1_base64 }}"/>
<h2>Reporte No: {{reporte.id}}</h2>
<p>Envíado el {{reporte.fecha}}</p><i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</ion-list>
<div ng-if="!reportes.length" class="container">
<p>No has enviado reportes. Desde la pantalla de Reportes Guardados, utiliza el botón sincronizar.</p>
</div>
</ion-content>
</ion-view>
Here it is a CodePen:
http://codepen.io/jdsampayo/pen/QbLggv
Any help will be appreciated to conserve the animation.
Use the $event object in onReporteDelete function and stop event bubbling by using stopPropagation.
Updated codepen
hope this helps.
Try using event.preventdefault() - that might fix your problem. However, if you can provide a jsbin link, it will be better to debug the problem.
Use the event.preventDefault() in the ondelete function that you have.