Hello I am new in ionic app and I created a first page using following:->
<ion-modal-view>
<ion-view id ="login" hide-nav-bar="true">
<ion-content scroll="false">
<div id="login_image" >
<div class="header padding text-center logodata">
<img src="img/front-logo.png" alt="Your logo here" width="60%" height="auto" class="logoImage"/>
</div>
<div class="header padding text-center panda">
<img src="img/bear.png" alt="Your logo here" width="47%" height="auto"/>
</div>
<h1 class="getstarted" style="text-align:center">Get Started !</h1>
</div>
<form ng-submit="doLogin()" name="loginForm">
<div class="row responsive-md">
<div class="col col-50 col-offset-25">
<div class="list">
<label class="item item-input">
<i class="fa fa-user fa-6" aria-hidden="true"></i>
<input type="email" ng-model="loginData.username" placeholder="" required>
</label>
<label class="item item-input">
<i class="fa fa-lock fa-6" aria-hidden="true"></i>
<input type="password" placeholder="" ng-model="loginData.password" required>
</label>
<button class="button button-block button-positive sign_in" type="submit" ng-disabled="loginForm.$invalid">
SIGN IN
</button>
<div class="signup"><center class="insignup"><span class="donaccount">Don't have an account ?</span> <a href ng-click= "dashBoard()" class="achorsignup"> SIGN UP</a></center><div>
</div>
</div>
</div>
</form>
</ion-content>
</ion-view>
</ion-modal-view>
then I see the design in virtual device means in my laptop it look properly by scrolling
But When I run in android phone it look like this no scroll option is showing how to see full home page in android phone
ion-Scroll Can be used in places where you may not need a full page scroller, but a highly customized one, such as image scubber or comment scroller.
<ion-scroll scrollX="true">
</ion-scroll>
<ion-scroll scrollY="true">
</ion-scroll>
<ion-scroll scrollX="true" scrollY="true">
</ion-scroll>
More info refer this
You have to set the value of scroll attribute to true if you want to make the page scroll.
<ion-content scroll="true">
Hope this helps!
Related
i want to remove the border around the ionic-toggle
<ion-content ng-init="checkarrivee.getAllListeCriteres();">
<div class="swipe" on-swipe-left="warn('Must use scope')">Swipe div</div>
<div class="list" style="width: 95%;margin-left: 2%">
<span us-spinner="{color: 'blue', radius:30, width:8, length: 16}" spinner-key="spinner-0"></span>
<label class="item item-input item-stacked-label">
<span class="input-label">Mission en cours :</span>
<input ion-autocomplete name="vehicule" type="text" readonly="readonly" class="ion-autocomplete"
items-clicked-method="itemsClicked(callback)"
items-removed-method="itemsRemoved(callback)"
placeholder="Séléctionner une mission"
items-method="getMissionEnCours(query)"
external-model="initialCountry"
item-view-value-key="codeDeFicheDeMission"
items-method-value-key="items"
max-selected-items="1"
autocomplete="off"
ng-model="checkarrivee.ficheDeMission"
required/>
</label>
</div>
<ion-list ng-repeat="(key,value) in checkload | groupBy:'Niveau'">
<div class="item item-divider" >{{key}}</div>
<ion-item on-swipe-left="warn('Must use scope')" ng-repeat="var in value" >
<ion-toggle ng-model='checkarrivee.boo[var.id]' ng-click="checkarrivee.isMissionSelected(var.id,checkarrivee.ficheDeMission.id)" toggle-class="toggle-positive">{{var.designation}}</ion-toggle>
<button class="button button-clear icon ion-star button-assertive"
ng-click="toggleStar(var)" ng-show="var.star">
</button>
<ion-option-button class="button-dark" >
<i class="icon ion-star"></i>
</ion-option-button>
</ion-item>
</ion-list>
image:
If you do not want the border to show for the toggle's just add style='border:0;' like this:
<ion-toggle style="border:0;" ng-model='checkarrivee.boo[var.id]' ng-click="checkarrivee.isMissionSelected(var.id,checkarrivee.ficheDeMission.id)" toggle-class="toggle-positive">{{var.designation}}</ion-toggle>
But I would suggest not using inline CSS, and instead adding all styling to your css/scss file as it will become much more difficult to maintain as the project scales.
EDIT:
For the CSS it will be something like this .list .item .noToggleBorder{border:0;}
Here's a codepen for you to check it out.
I have problem with ng-repeat when i search for a car its done but i delete the name i searched for the cars doesn't back to the view this is my html:
<ion-content lazy-scroll ng-class="{expanded:isExpanded}">
<div class="item-input-inset bar-light">
<label class="item-input-wrapper">
<i class="icon ion-search placeholder-icon"></i>
<input type="search" ng-model="query" placeholder="Search">
</label>
</div class="content has-header">
<div>
<div class="list animate-fade-slide-in-right">
<a class="item item-thumbnail-left item-icon-right" ng-repeat='item in voitures[0] | filter: query' ng-model="data" ng-click="getID(item)" ui-sref="app.detailsVoiture({Id: item.idVoiture})">
<img image-lazy-src="img/{{item.photo}}.jpg" image-lazy-loader="android" image-lazy-distance-from-bottom-to-load="-200" image-lazy-distance-from-right-to-load="-200">
<h2 class="border-top" style="color:blue;">{{item.Modele.marque}} {{item.Modele.nom}}</h2>
<p >{{item.categorie}}</p>
<i class="icon ion-pricetag energized-900">{{item.prixLocation}}</i>
</a>
</div>
</div>
</ion-content>
I am following the following link to get angular animations working in the app:
http://angularanimation.ya.com.tr/start.html
I have animate.css in my css folder and link to it in index.html.
Also, I have ngAnimate as a dependent module in app.js
I tried to use an animation in my html:
<ion-view class="slide-from-top">
<ion-content>
<div class="contentArea">
<form action="#">
<div class="row">
<label>The Italian Melt</label>
<input class="field" type="text" value="160.00">
<input class="number" type="text" value="1">
<i class="fa fa-plus-circle"></i>
<i class="fa fa-minus-circle"></i>
</div>
<div class="row">
<label>The Italian Melt</label>
<input class="field" type="text" value="160.00">
<input class="number" type="text" value="1">
<i class="fa fa-plus-circle"></i>
<i class="fa fa-minus-circle"></i>
</div>
<div class="row">
<label>The Italian Melt</label>
<input class="field" type="text" value="160.00">
<input class="number" type="text" value="1">
<i class="fa fa-plus-circle"></i>
<i class="fa fa-minus-circle"></i>
</div>
<hr>
<div class="row text">
<div class="col-33">Subtotal</div>
<div class="col-75">Rs. 210.00</div>
</div>
<div class="row text">
<div class="col-33 blueText">Discount</div>
<div class="col-75 blueText">Rs. 42.00</div>
</div>
<div class="row text">
<div class="col-33">Delivery Fee</div>
<div class="col-75">Rs. 10.00</div>
</div>
<hr>
<div class="row text">Total will refund off</div></br>
<div class="row text">
<div class="col-33 totalBig">Total</div>
<div class="col-75 totalBig">Rs. 178.00</div>
</div>
<hr>
<form action="#">
<div class="customRow">
<div class="row coupon">
<label>Coupon</label>
<input class="couponField" type="text">
<button class="applyBtn">Apply</button>
</div>
</div>
</form>
<p class="row redText">Minimum Order : Rs. 500/-</p>
</div>
<button class="button-checkout">Proceed to Checkout <i class="fa fa-shopping-cart"></i> >></button>
</ion-content>
</ion-view>
Infact, when I go to console,
I see this:
How do I get it working?
Pleas check https://daneden.github.io/animate.css/
Dynamic Animation
You have to call animation function like
<ion-view class="myAnimation">
<ion-content>
....
</ion-content>
</ion-view>
and add class when page is loaded
$('#myAnimation').addClass('animated shake');
and after animation finish you have to remove class which is added to div so again animation works without refresh page. for that you have to do that
$('#myAnimation').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', removeClass);
function removeClass()
{
$('#myAnimation').removeClass('animated shake');
}
This way is dynamic but you can also set as static in html like
Static
<ion-view class="animated shake">
<ion-content>
....
</ion-content>
</ion-view>
I am using angularjs for the front-end of my web app. I currently have a comments view that contains multiple reply and edit forms (due to ng-repeat). How could I rewrite the code below so form validation can be applied appropriately to each of the forms (currently the code is only showing a form for reply comment). I have tried using ng-form, but I was unsuccessful.
<div class="comments">
<div ng-hide="comments.length>0||angular.isUndefined(comments)" ng-cloak>
<p class="center">No comments yet, be the first one!</p>
</div>
<div class="comment clearfix" ng-repeat="comment in comments track by $index"
style="padding-left:{{comment.margin}}px">
<div class="body" style="padding-left:60px">
<span ng-hide="comment.edit_mode">{{comment.comment}}</span>
<div ng-show="comment.edit_mode">
<textarea msd-elastic="" ng-model="comment.comment" class="form-control" rows="1">{{comment.comment}}</textarea>
</div>
</div>
<div class="add-comment reply" ng-show="open_reply" ng-cloak>
<form name="form.replyForm" class="form-inline clearfix" role="form"
ng-submit="Submit(reply.comment,story.id,reply.anonymous,comment.comment_id,$index);open_reply=false;reply.comment=''"
novalidate>
<div id="comment-form">
<img ng-src="{{user.avatar}}" alt="" class="avatar"/>
<span>
<textarea msd-elastic ng-model="reply.comment" class="form-control message" rows="1"
placeholder="Add a comment..." ng-click="show_reply_anonymous_checkbox=true"
focus-on="open_reply" name="comment" required></textarea>
<span style="color:red" ng-show="form.replyForm.comment.$error.required">test</span>
</span>
<button type="submit" ng-disabled="form.replyForm.$invalid"
class="btn btn-primary submit">
Reply
</button>
</div>
</form>
</div>
</div>
I am using radio buttons in a popover to create a dropdown type filter for my app.
When I use an iPad the radio buttons go haywire! This works perfectly on every other device.
Best illustration is in this video
https://www.youtube.com/watch?v=Begkz4uS8hQ
Here is my code:
<script id="templates/popover.html" type="text/ng-template">
<ion-popover-view>
<ion-content>
<div class="item bar-header bar-positive">
<h2 class="title">Difficulty</h2>
</div>
<label class="item item-radio">
<input type="radio" ng-model="filter.difficulty" value="" name="group">
<div class="item-content">
All
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" ng-model="filter.difficulty" value="Easy" name="group">
<div class="item-content">
Easy
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" ng-model="filter.difficulty" value="Medium" name="group">
<div class="item-content">
Medium
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" ng-model="filter.difficulty" value="Hard" name="group">
<div class="item-content">
Hard
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
<label class="item item-radio">
<input type="radio" ng-model="filter.difficulty" value="Expert" name="group">
<div class="item-content">
Expert
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</ion-content>
</ion-popover-view>
</script>
And displayed using this:
<button class="button button-positive button-small col col-20 icon-left ion-connection-bars filter-button" ng-click="popover.show($event)">
{{filter.difficulty || 'All'}}
</button>
Many thanks to anyone who can help.