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
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 use ionic for my mobile app. I have a Directory with a list of employees. It works fine except that the last employee name gets cut or is not visible.
I use collections-repeat inside ion-scroll. Above this I filter directive. The filter directive should not be scrollable.
I tried setting bottom:50px for the last item in the list, it brings up the last item, but writes over the item above it.
Any suggestions on how to fi this would be break
<ion-content scroll="false">
<filters on-query-change="onQueryChange()" class="filter-directive"></filters>
<hr class="hline">
<ion-scroll class="scroll-length">
<div
collection-repeat="contact in contacts track by contact.id"
item-width="100%"
item-height="getHeight(contact)"
ng-show="(contact.fullName || contact.isDivider)>
<div id="company-directory-item-divider"
class="item item-divider fw-semibold dark"
ng-if="contact.isDivider">
{{contact.letter}}
</div>
<div
class="item item-icon-right tn-nav-item"
ng-click="gotoEmployeeInfo(contact)"
ng-if="contact.fullName">
<span ng-bind-html="contact.fullName"></span>
<div class="tn-nav-item-subtitle dark"> {{contact.workShortLocDesc}}</div>
<i class="icon ion-ios-arrow-forward"></i>
</div>
</div>
<ion-scroll>
</ion-content>
Looks like the div with collection repeat should be the first element inside ion-content for this to work:
So this is how I finally fixed it:
Got rid of ion-scoll
made ion-content scrollable
Put the filter directive and hline between ion-header and ion-content and set it to position absolute (along with some margin top styling)
styled ion-content with margin-top to bring it lower (so as not to write over the filter)
This worked.
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
this works but it can't scroll down to the very bottom. I have home button at the bottom and and few items are blocked by it and won't scroll up. home button is in footer in the main page and not on the same controller. how do I make sure I see all picture at the bottom. appreciated for any advice.
<ion-scroll direction='y' zooming='true' style="height: 1024px">
<div class="favorites list item item-text-wrap" ng-repeat="photo in favorites">
<a class="item item-thumbnail-left" href="#">
<img src="sourceURL</p>
</a>
</div>
</ion-scroll>
I think the better way is use <ion-content>, this was designed for scrolling as well. But it has some class that help us detect the bottom and top margin like has-footer or has-sub-footer. This won't need to specify an exact height value by style attribute too.
For <ion-content> you can do like this:
<ion-content direction="y" class="has-footer" <!-- has-bouncing="true" --> >
<div class="favorites list item item-text-wrap" ng-repeat="photo in favorites">
<a class="item item-thumbnail-left" href="#">
<img src="sourceURL"</p>
</a>
</div>
</ion-content>
Like the example above, I added has-footer class, it will automatically push the main content up for you, all the content will be shown as you expected. You can also put the has-bouncing="true" attribute like <ion-scroll>
I am using PDFMAKE to create a base64 encoded pdf and I tried to show it with the Iframe by giving the encoded base64 to iframe src. It works on PC but it didn't work on the mobile ( android and ios ).
So, finally I stumbled upon Angularjs-PDF to show the pdf. Now, I am able see the pdf in mobile. But when I try to give custom width and height respective to device it takes. But the problem arises when I use zoom functionality, the page gets zoomed but it goes out of the screen. I can not even slide or swipe to see the content outside of the screen.
I want to make a pdf on the client side and preview to user with zoom functionality in Ionic.
If anybody got any solution for this please share, Thank You.
So for our company app we used angular-pdf Viewer:
Here is the template for the pdf viewer template, putting inside a ion-scroll allows for pinch zoom and it works great.
<div ng-show="notLoaded" class=" center bar bar-subheader">
<h1 class="title">Loading PDF...</h1>
</div>
<div class="tabs tabs-icon-left">
<a class="tab-item" ng-click="goPrevious()">
<i class="icon ion-arrow-left-c"></i>
Prev
</a>
<a class="tab-item" ng-click="goNext()">
<i class="icon ion-arrow-right-c"></i>
Next
</a>
</div>
<ion-scroll zooming="true" direction="xy" class="has-header">
<canvas class="padding" id="pdf" class="rotate0"></canvas>
</ion-scroll>
then on the page that shows the pdf:
<ion-view>
<div class="bar bar-header bar-positive">
<button ng-click="$ionicGoBack()" class="button button-clear button-light icon-left ion-chevron-left">Go Back</button>
</div>
<div class="has-header">
<ng-pdf template-url="components/pdfviewer/viewer.html" canvasid="pdf" scale="0.675">
</ng-pdf>
</div>
</ion-view>
You feed the template to the pdf viewer and it will show up on the page.
To use it first include the right js files:
<script src="bower_components/pdfjs-dist/build/pdf.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-pdf-viewer/dist/angular-pdf-viewer.min.js"></script>
then inject pdf:
var app = angular.module('App', ['pdf']);
you can read more about it here, but using it in combination with ion-scroll it works just like you think it should on a native device:
https://github.com/winkerVSbecks/angular-pdf-viewer