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
Related
I'm devloping an aplication on ionic using api when I go on a certain view the first time some data sometimes don't display. however the data seem to have no problem to load.
here a screenshot of my problem :
controller.js :
.controller('activite', function($http,$state,settings,$scope,$rootScope,ActiFactory,EventFactory)
{
console.log('ActiFactory',ActiFactory);
evenement_selectionne=ActiFactory.evenement_selectionne;
$scope.evenement_selectionne=evenement_selectionne;
activite_selectionne=ActiFactory.activite_selectionne;
$scope.activite_selectionne=activite_selectionne;
}
activite.html :
<ion-view>
<ion-nav-title>
{{activite_selectionne.nom_activite}}
</ion-nav-title>
<ion-content padding="true" class="has-header">
<form class="list">
<label class="item item-input">
<span class="input-label">
{{evenement_selectionne.lieu}}, {{evenement_selectionne.date}}. {{activite_selectionne.heure_activite}}.
</span>
</label>
</form>
<div>
{{activite_selectionne.description}}
</div>
<div>
nombre d'inscrits : {{activite_selectionne.inscris.length}}/{{activite_selectionne.limit_particip_activ}}
</div>
<button style="color:#FFFFFF;" ng-click="inscription()" class="button button-balanced button-block icon-right ion-arrow-right-c">
S'inscrire à cet évenement !
</button>
<img src="{{activite_selectionne.image}}" style="display: block; width: 100%; height: auto; margin-left: auto; margin-right: auto;">
</ion-content>
</ion-view>
thank you in advance
I have my Ionic app all set up, however, it doesn't function like in the browser...for example, the background picture doesn't load. Does anyone know why?
Everything, including the API that app communicates with, is stored locally
Here is the view:
<ion-view title="Login" id="page2" hide-back-button="true" hide-nav-bar="true">
<ion-content overflow-scroll="false" padding="true"
style="background: url('../img/loginBackground.jpg') no-repeat center;background-size:cover;">
<form class="list">
<style scoped>
.inputCustom{
background-color: rgba(255,255,255,0.8);
}
.imgBack{
display: block;
margin-left: auto;
margin-right: auto;
overflow: visible;
min-width: 60vw;
max-height: 60vw;
max-width: 60vw;
}
</style>
<img src="../img/logo.gif" class="imgBack">
<div class="spacer" style="height: 60px;"></div>
<ion-list>
<label class="item item-input inputCustom">
<span class="input-label">E-mail</span>
<input type="email" placeholder="" ng-model="user.email">
</label>
<label class="item item-input inputCustom">
<span class="input-label">Lozinka</span>
<input type="password" placeholder="" ng-model="user.password">
</label>
<div class="animated flash" ng-show="validationBool"
style="text-align: center; padding-top: 5px; color: indianred">{{validationError}}
</div>
</ion-list>
<div class="spacer" style="height: 40px;"></div>
<a ng-click="signIn()" id="login-button1" class="button button-positive button-block">Prijavi se</a>
<a ui-sref="signup" id="login-button2" class="button button-positive button-block button-clear">Nemaš račun? Registriraj se</a>
</form>
</ion-content>
</ion-view>
what I understand here is that you getting problem in showing up images in ionic. So here's the solution.
Problem in your code is here
background: url('../img/loginBackground.jpg')
You haven't gave a proper url for your image.This must be like this.
background: url('/img/loginBackground.jpg')
Note: No dots and your image would be in "www/img".
Same for the img tag.
EDIT:
try this
.scroll-content {
background:url(/img/loginBackground.jpg) no-repeat center;
background-size: cover;
and remove style bavckground from ionic content.
I found out that the preceding slash was causing the problem. The correct path is
<ion-content overflow-scroll="false" padding="true"
style="background: url(img/loginBackground.jpg) no-repeat center;background-size:cover;">
And for logo:
<img src="img/logo.gif" class="imgBack">
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
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 made a code to attach image and a text along side to the header bar of ionic view. This is the code snippet:
<ion-view align-title="left">
<h1 style="margin-left:100px" class="title">
<img class="title-image" src="http://www.ionicframework.com/img/ionic-logo-white.svg" width="123" height="43" />
</h1>
<h1 class="title">Titled Text</h1>
<ion-content class="padding">
<div class="list list-inset">
<label style="border: 3px solid red; border-radius:5px;" class="item item-input">
<input focus-on="focusMe" type="text" ng-model="register.username" placeholder="Choose username">
</label>
<label style="margin-top: 10px; border: 3px solid red; border-radius:5px;" class="item item-input">
<input type="password" placeholder="Choose password" ng-model="register.password">
</label>
</div>
<a style="margin-top: 100px; border: 3px solid red; border-radius:5px; background-color: #ff6000 class="button button-block button-positive">Next</a>
</ion-content>
</ion-view>
This is the plunk that I have made.
Plunker
Please how can I make image and text appear to the header bar of ionic view?
I have made a small demo for you,
Plunker
HTML
<ion-view title="Home" hide-nav-bar="true">
<div class="bar bar-header bar-light">
<h4>myApp</h4>
<div style="width:100%">
<img style="height: 16px;
margin-top: 9px;" src="https://placehold.it/85x25" />
</div>
</div>
<ion-content padding="true">
<h1 style="text-align: center;">Welcome user</h1>
</ion-content>
</ion-view>
This is the solution to my Problem/challenge.
Since I found it difficult doing something like this
<ion-view align-title="left">
<h1 style="margin-left:100px" class="title">
<img class="title-image" src="http://www.ionicframework.com/img/ionic-logo-white.svg" width="123" height="43" />
</h1>
<h1 class="title">Titled Text</h1>
To add image and text to the bar, then I ended up doing this:
<ion-nav-buttons side="left">
<img class="title-image" src=".../ionic-logo-white.svg" width="30" height="43" /></h1>
</ion-nav-buttons>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
Don't know what you might think about it but it worked. As it placed an image at the header and I also have a text at the header bar as well. Just a simple logic