I am displaying a normal list view getting data but the bottom is cut off.
In my css, I have: ]
.scroll {
height: 100%
}
My HTML is:
<ion-content scroll="true" ng-controller="CategoriesCtrl" overflow-scroll="true">
<ion-list>
<ion-item ng-repeat="category in categories | orderBy: 'id':true"
href="#/category/{{category.id}}"
class="item item-thumbnail-left catthumb list cat">
<img ng-src="{{category.acf.thumbnail.url}}" class="catthumb">
<span style="font-size: 21px; font-weight: 400;">{{category.name}}</span>
</ion-list>
</ion-content>
Here is the image:
You're missing the closing ion-item tag. It should be:
<ion-content scroll="true" ng-controller="CategoriesCtrl" overflow-scroll="true">
<ion-list>
<ion-item ng-repeat="category in categories | orderBy: 'id':true"
href="#/category/{{category.id}}"
class="item item-thumbnail-left catthumb list cat">
<img ng-src="{{category.acf.thumbnail.url}}" class="catthumb">
<span style="font-size: 21px; font-weight: 400;">{{category.name}}</span>
</ion-item>
</ion-list>
</ion-content>
This happen when we added another view level header or footer.
Simple solution is to add spacer div in the end of ur page with the height of ur page level header.
For more info
Related
im trying to make an ionic-list scrollable by adding ion-scroll but instead of the the ion-list being scrollable the entire page becomes scrollable. how do i make just the ionic-list scrollable? here's my code:
<ion-view title="Omnipay - Welcome" id="page5">
<ion-content padding="true" class="has-header">
<div>
<img src="img/omnipay_logo.jpg" style="display: block; width: 100%; height: auto; margin-left: auto; margin-right: auto;">
</div>
<h3 id="omnipayWelcome2-heading13" style="color:#000000;">My Info:</h3>
<h4 id="omnipayWelcome2-heading15" style="color:#000000;">Balance:</h4>
<h4 id="omnipayWelcome2-heading14" style="color:#000000;">Transaction History</h4>
<ion-scroll direction="xy" >
<ion-list can-swipe="listCanSwipe">
<ion-item ng-repeat="item in data1">
Date: {{item.date}}<br>Transaction: {{item.transaction}}<br>Merchant: {{item.merchant}}<br>Amount: {{item.amount}}
</ion-item>
</ion-list>
</ion-scroll>
<a ui-sref="menu.mainMenu" id="transactionHistory-button1" class="button button-positive button-block">Back</a>
<button class="button button-positive button-block" ng-click="refreshPage()">Refresh</button>
</ion-content>
</ion-view>
Give your <ion-scroll> directive a height attribute: Eg.
CodePen Demo / CodePen Full Page (Best seen on mobile view of the browser)
<ion-scroll style="height: 200px">
<ion-list>
<ion-item ng-repeat="item in items">{{item}}</ion-item>
</ion-list>
</ion-scroll>
ion-scroll doesn't exist anymore, div could be use instead
the above css could be actualized like the following
div[scrollx=true],div[scrolly=true] {
position: relative;
overflow: hidden;
}
div[scrollx=true] {
overflow-x: auto;
}
div[scrolly=true] {
overflow-y: auto;
}
<div scrolly="true" style="max-height:100px">
<!--content to scroll whose height exceeds 100px-->
</div>
This worked for me:
<ion-content [scrollEvents]="true">
<ion-list>
...
</ion-list>
</ion-content>
https://ionicframework.com/docs/api/content
I am trying to put a full width image with certain height at the top of the ionic page (under the nav, before the list). The image does work as I put it in the list, it's just not showing at the top. Any ideas?
<ion-view view-title="{{pageTitle}}">
<ion-content>
<img ng-src="{{post.acf.top_image_full_list}}">
<ion-list>
<div class="list">
<a ng-repeat="post in posts"
href="#/tab/watch/{{current_category_id}}/{{post.id}}"
class="item item-thumbnail-left">
<img ng-src="{{post.acf.top_single_msg}}">
<div class="postcat">
<span style="font-size: 17px;">{{post.title.rendered}}</span>
<p>{{post.date | date}}</p></div>
</a>
</div>
</ion-list>
</ion-content>
</ion-view>
you are trying to access the image post.acf.top_image_full_list - which is within a 'post' object. However you do not create the 'post' object until further down in the list with the line <a ng-repeat="post in posts" - you are trying to use the 'post' object outside of the ng-repeat.
I created the application using as per below coding, I want to handle the list view with ionic search bar as per below image. Is it possible, If so suggest me some ideas or else code blog It would be helpful for me.
Note : As per below code, Searching was worked well but if the search happened its shows the text with matched list and even not matched list with an empty cell. So I want to handle the search like second snap mentioned below.
sample.html
<ion-view view-title="Call Lists">
<ion-content class="customListView" has-header="true">
<div class="bar bar-header item-input-inset">
<input type="search" placeholder=" Search" ng-model="searchValue"
style="width:100%; padding-left:11px;" />
</div>
<ion-list>
<ion-item class="item item-avatar item-icon-right" ng-repeat="item in callItems.objects" ng-click="doTask()" can-swipe="true">
<ion-option-button class="button-positive"
ng-click="doEdit()">
<i class="ion-more"></i>
</ion-option-button>
<img src="img/men.png">
<i class="icon ion-ios-arrow-right"></i>
<div ng-repeat="(key, value) in item.Fields | filter:searchValue">
<h3> {{value.Value}}</h3>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Output :
I Want to do like below :
While adding the below line empty cell issues got fixed.
<ion-item class="item item-avatar item-icon-right" ng-repeat="item in callItems.objects | filter:searchValue" ng-click="doTask()" can-swipe="true">
Instead of
<ion-item class="item item-avatar item-icon-right" ng-repeat="item in callItems.objects " ng-click="doTask()" can-swipe="true">
Thing is I've given two ng-repeat as per my scenarios, So I've to set search filter for both.
If anyone having the ideas regarding the search activity as per mentioned in the second snap, Share me your ideas or code blog It would be helpful for me.
I've been trying to create a a mobile app with Ionic.
I am using slider.js to slide between certain DIVs.
The app was working properly until suddenly the vertical slider decided to not display itself. Completely invisible.
The strange part is that it is working 100% correctly on the browser in the ionic lab.However It does not work on my Iphone. I've tried using PhoneGap developer app and ionic view app , both of them same result , doesn't get displayed.
Another strange thing happens is that , If I change the swiper to be horizontal , it works.
Any help is appreciated.Thank you.
Here is my HTML code :
<div class="swiper-container swiper-container-v">
<div class="swiper-wrapper">
<div class="swiper-slide" ng-repeat="child in home.models[0].children" end-repeat>
<div class="card" style="border: 1px #D9D9D9 solid">
<div class="item item-text-wrap">
<ion-list>
<ion-item class=" item-avatar item-icon-right" type="item-text-wrap" href="#">
<h2 style="text-align: center"><b>{{ child.name | capitalizea}}</b></h2>
<p>15 / 35</p>
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
<ion-item class=" item-avatar item-icon-right" type="item-text-wrap" href="#" ui-sref="tab.profile-dashboard({id:child.manager.id})">
<img width="100%" ng-src="{{child.manager.image_path}}">
<h2 class="capitalizeff"> {{ child.manager.name}}</h2>
<p> {{ child.manager.title}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
<ion-item class="item-avatar item-icon-right" type="item-text-wrap" href="#">
<img width="100%" ng-src="https://cdn2.iconfinder.com/data/icons/crystalproject/crystal_project_256x256/apps/keditbookmarks.png">
<h2>Achieve 100 goals</h2>
<p>35 / 100</p>
</ion-item>
<ion-item class="item-avatar item-icon-right" type="item-text-wrap" href="#">
<h2 style="text-align: center;padding-top: inherit">Food</h2>
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
<ion-item class="item-avatar item-icon-right" type="item-text-wrap" href="#">
<h2 style="text-align: center;padding-top: inherit">fruits</h2>
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</ion-list>
</div>
</div>
</div>
</div>
</div>
Here is my JS code :
.controller('HomeCtrl', function ($scope, $rootScope) {
var vm = this;
var mySwiper = new Swiper('.swiper-container-v', {
slidesPerView: 1,
spaceBetween: 50,
direction: 'vertical',
observer: true
});
});
Here is the css :
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
}
I have a playlist page where i create my custom tabs. Tabs working very well but the problem is that when i scroll down first tab content and then move to another tab then scroll position remain same, i am not able to see the content of second tab.
And I don't want to use default tabs of ionic.
Here is plnkr link where i implement my code:-
<ion-view view-title="Playlists" class="tabSection">
<div class="tabs-striped tabs-top tabs-background-dark tabs-color-energized">
<div class="tabs">
<a class="tab-item" ng-click="articles(false)">
Home
</a>
<a class="tab-item" ng-click="categories(true)">
Favorites
</a>
</div>
</div>
<ion-content>
<div class="articleSection" ng-hide="showme">
<ion-list>
<ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
{{playlist.title}}
</ion-item>
</ion-list>
</div>
<div class="categorySection" ng-show="showme">
<ion-list>
<ion-item ng-repeat="playlist in favorites" href="#/app/playlists/{{playlist.id}}">
{{playlist.title}}
</ion-item>
</ion-list>
</div>
</ion-content>
</ion-view>
http://plnkr.co/edit/nlUgR8?p=preview
Any Suggestion?
Thanks
You can use $ionicScrollDelegate.
.controller('PlaylistsCtrl', function($scope,$ionicScrollDelegate) {
$ionicScrollDelegate.scrollTop();
});
This will show scroll content from top.
Hope it works for you.