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
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 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've seen it on several apps, but can't seem to figure it out. I simply want to place a icon for font (with + and -) where the user clicks it, it will enlarge the font size or decrease it.
Working plunker.
controllers.js
angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope) {
$scope.size = 14;
$scope.fontSize = "font-size-" + $scope.size;
$scope.increase = function(){
//Higher limit
if($scope.size < 18){
$scope.size++;
$scope.fontSize = "font-size-" + $scope.size;
}
};
$scope.decrease = function(){
//Lower limit
if($scope.size > 14){
$scope.size--;
$scope.fontSize = "font-size-" + $scope.size;
}
};
});
tab-dash.html
<ion-view view-title="Dashboard">
<ion-content class="padding" ng-class="fontSize">
<button class="button" ng-click="increase()"><i class="ion-plus-round"></i></button>
<button class="button" ng-click="decrease()"><i class="ion-minus-round"></i></button>
<div class="list card">
<div class="item item-divider">Recent Updates</div>
<div class="item item-body">
<div>
There is a fire in <b>sector 3</b>
</div>
</div>
</div>
<div class="list card">
<div class="item item-divider">Health</div>
<div class="item item-body">
<div>
You ate an apple today!
</div>
</div>
</div>
<div class="list card">
<div class="item item-divider">Upcoming</div>
<div class="item item-body">
<div>
You have <b>29</b> meetings on your calendar tomorrow.
</div>
</div>
</div>
</ion-content>
</ion-view>
style.css
.font-size-14 *{
font-size: 14px;
}
.font-size-15 *{
font-size: 15px;
}
.font-size-16 *{
font-size: 16px;
}
.font-size-17 *{
font-size: 17px;
}
.font-size-18 *{
font-size: 18px;
}
I added the lower and higher limits so an user can't go over these two font-sizes.
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
In my testing phase I want to test a header element h2 in html
<a class="item-content" ng-href="#/lead/details/1/" target="_self" href="#/lead/details/1/">
<div class="row" style="height: 35px; width: 100%; margin-left:-10px; margin-top: -10px; margin-right: 0px; padding: 0px">
<div class="col col-top col-67">
<h2 class="ng-binding">HAL 9000</h2>
<br>
<h4 style="font-weight: normal; margin-top: -15px" class="ng-binding">Jupiter Feb 10, 2025 </h4>
</div>
<div class="col col-center col-10 col-offset-25" style="margin-right: -10px">
<a href="tel:9876543210" ng-click="$event.stopPropagation()">
<i class="icon ion-ios-telephone-outline" style="font-size: 36px"></i>
</a>
</div>
<div class="col col-center col-20" style="margin-left: 15px">
<a href="mailto:hai#spaceodyssey.com?Subject=Hi;" ng-click="$event.stopPropagation()">
<i class="icon ion-ios-email-outline" style="font-size: 36px;"></i>
</a>
</div>
</div>
</a>
I wanted to test that the "Hal 9000" is visible or not could someone help me to find it in my protractor testing process
in my protractor I used
var child = element(by.css('.col col-top.col-67')), element(by.css('.ng-binding'));
it('20 should update 2nd lead with proper data',function(){
expect(child.getText()).toBe('HAL 9000'); });
and i get an error message in my terminal as
NoSuchElementError: No element found using locator: By.cssSelector(".col col-top.col-67")
someone help me to fix this problen
for a more precise locator, you can always use:
element(by.css('.col.col-top.col-67 h2');