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>
Related
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
I have ng-class inside of my ion-list if the user clicks an item it adds the class selected. The problem when using collection-repeat is its managing the DOM and changing the selected class as I scroll.
<ion-list>
<ion-item collection-repeat="contact in contacts | filter:filters" class="contact" ng-click="pickContact($index, $element, this.contact)" ng-model="contactModel" ng-class="{'selected': contact.selectedContact}" toggle-contacts="selected" collection-item-height="150" collection-item-width="'33.3%'">
<div ng-if="contact.photo.type == 'img'" class="contact-img">
<img ng-src="{{contact.photo.value}}.png" alt="">
</div>
<div ng-if="contact.photo.type == 'text'" class="contact-text-placeholder">
{{contact.photo.value}}
</div>
<div class="contact-name">
{{contact.name}}
</div>
</ion-item>
</ion-list>
How can I avoid this from happening? I want the class to stick.
The solution was to add the class into the data itself.
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 am having some issues adding a hyperlink to a 'hcard' in ionic. I am using the following plugin (https://github.com/drewrygh/ionic-ion-horizontal-scroll-cards) and the codepen is here: http://codepen.io/drewrygh/pen/jEJGLx
When I try to add hyperlink to hcard nothing happens. What is the best way to do this, does anyone know?
<div ng-controller="barsCtrl">
<h4>Top Rated Bars</h4>
<hscroller>
<hcard ng-repeat="bar in bars" index="{{$index}}" desc="{{bar.name}}" image="{{bar.profile_pic}}">
</hcard>
</hscroller>
</div>
Do you mean you want the cards to link to something as an anchor tag? You can wrap the cards in an anchor tag: http://codepen.io/anon/pen/Nqvjpv
<a ng-repeat="item in items" href="http://www.google.com?q={{item.desc}}" target="_blank">
<hcard index="{{$index}}" desc="{{item.desc}}" image="{{item.image}}"></hcard>
</a>