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">
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'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 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');
I am trying to make a simple toggle example in AngularJS. I am facing one issue I need to show and hide with some animation like slide up and slide down. I have search button on header on click I show search div it is working in my plunker. My issue is to do animation...
Secondly I need to add z-index because it generates new layer. When I click search button "my name " come down when search bar is open. Why?
<ion-view>
<ion-header-bar align-title="" class="bar-positive">
<div class="buttons">
<i style="font-size:25px!important" class="icon-right ion-android-radio-button-off" ng-click="showsearch()"></i>
</div>
<h1 class="title">Title!</h1>
<a class="button icon-right ion-chevron-right button-calm"></a>
</ion-header-bar>
<div class="list list-inset searchclass" ng-show="isdiplay">
<label class="item item-input">
<img src="https://dl.dropboxusercontent.com/s/n2s5u9eifp3y2rz/search_icon.png?dl=0">
<input type="text" placeholder="Search">
</label>
</div>
<ion-contend>
<div style="margin-top:50px">
my name
</div>
</ion-contend>
</ion-view>
When using Angular you still have the opportunity to use plain old CSS transitions. However, there are many ways to animate elements. In my solution here I use ng-class instead of ng-show. I toggle the class active when ever you click on the trigger. Finally the class changes the state of the element which results in the animation you would like to achieve.
You could simply change ng-show to ng-class="{'active':isdiplay}" and add the following CSS:
.searchclass {
border: 1px solid red;
margin: 0 !important;
position: relative;
top: 44px;
z-index: 9999;
-webkit-transition: height .3s ease-in-out;
transition: all .3s ease-in-out;
height: 0;
opacity: 0;
}
.searchclass.active {
height: 49px;
opacity: 1;
}
You can however, as I said before, also use ng-show with the module ngAnimate which needs to be included in one of your own modules. This will enable animations out of the box, so that elements which can be animated get classes such as .ng-hide-remove, .ng-hide-add and .ng-hide-add-active etc. You could then style those classes on your own.
angular.module('ionicApp', ['ionic']).controller('MyController', function($scope) {
$scope.isdiplay = false;
$scope.showsearch = function() {
$scope.isdiplay = !$scope.isdiplay;
}
})
.searchclass {
border: 1px solid red;
margin: 0 !important;
position: relative;
top: 44px;
z-index: 9999;
-webkit-transition: height .3s ease-in-out;
transition: all .3s ease-in-out;
height: 0;
opacity: 0;
}
.searchclass.active {
height: 49px;
opacity: 1;
}
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet" />
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<div ng-app="ionicApp" ng-controller="MyController">
<ion-view>
<ion-header-bar align-title="" class="bar-positive">
<div class="buttons">
<i style="font-size:25px!important" class="icon-right ion-android-radio-button-off" ng-click="showsearch()"></i>
</div>
<h1 class="title">Title!</h1>
<a class="button icon-right ion-chevron-right button-calm"></a>
</ion-header-bar>
<div class="list list-inset searchclass" ng-class="{'active':isdiplay}">
<label class="item item-input">
<img src="https://dl.dropboxusercontent.com/s/n2s5u9eifp3y2rz/search_icon.png?dl=0">
<input type="text" placeholder="Search">
</label>
</div>
<ion-contend>
<div style="margin-top:50px">
my name
</div>
</ion-contend>
</ion-view>
</div>