Ionic swipe back gesture enable - ionic-framework

I have the following code:
personal-info.html
<ion-view view-title="Personal Information" can-swipe-back="true">
<ion-nav-buttons side="left">
<button class="button button-icon icon ion-ios-arrow-left" ng-click="doTheBack()" nav-direction="back"></button>
</ion-nav-buttons>
<ion-content class="padding">
<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>
</ion-content>
</ion-view>
and my controller
.controller('PersonalInfoCtrl', function($scope) {
$scope.doTheBack = function() {
window.history.back();
};
});
I want to enable the swipe back feature I tried by putting can-swipe-back="true" inside <ion-view> tag but it didn't help at all. Also I have checked a lot of documentation as well as this question How do you "Swipe to go back" in Ionic? but it seems that swipe back feature is not enabled for my application.

The way I implemented it was through $ionicNavBarDelegate.
In HTML:
<ion-view view-title="Personal Information">
<ion-content on-swipe-right="swipe('right')" class="padding">
<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>
</ion-content>
</ion-view>
In controller:
$scope.swipe = function (direction) {
if(direction == 'right')
$ionicNavBarDelegate.back();
}
Make sure to include $ionicNavBarDelegate in your controller header.
If that doesn't work, take a look at http://forum.ionicframework.com/t/any-sample-code-on-how-to-use-swipe-to-go-back/19122/13. Swipe-to-go-back seems to work by default since RC0 as demonstrated by http://codepen.io/mhartington/pen/RNqpJp.

Related

Have page slide in from right side ionic

I'm trying to add a transition where a user clicks on a button and the next page slides in from the right side.
Is that easy to do with the Ionic Framework?
I can't seem to find how to do that.
Here is what I have on my view:
<ion-view title="Payment" cache-view="false">
<ion-content padding="false" class="has-header">
<div class="container">
<div class="spacer" style="width: 290px; height: 31px;"></div>
<div class="show-list-numbers-and-dots">
<p style="color:#000000;">Payment Methods</p>
</div>
</div>
<ion-list>
<ion-item class="item-icon-left item-icon-right">
<i class="icon ion-card"></i>.... 2039
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
<ion-item class="calm" ui-sref="paymentPage">Add Payment Method</ion-item>
</ion-list>
<div class="spacer" style="width: 290px; height: 44px;"></div>
</ion-content>
</ion-view>
check this from official docs
slides component
First disable swipe and then on button click you can call this function for transition
slideTo(index, speed, runCallbacks)

Ionic - Dynamic content inside ionic modal prevents to scroll upward

When I try to dynamically add content in MODAL(overflow-scroll is set false), the page adds white space at the bottom of page and prevents me to scroll up to reach the top of "ion-content".
Can anyone help me?
My code:
<ion-modal-view>
<ion-header-bar>
....
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="fc in query.filterChoices">
...
</ion-item>
</ion-list>
<div class="row">
<div class="col col-20">
</div>
<div class="col col-60">
<button class="button button-stable button-block" ng-click="addFilterChoice();">
Add Filter
</button>
</div>
<div class="col col-40">
</div>
</div>
</ion-content>

Ionic add has-header and has-tabs-top automatically into <ion-content>?

I'm creating a project using Ionic 1.3.2 and building to Android 5.1.1. The problem is after buiding the classes has-header and has-tabs-top are added into <ion-content> automatically and because this a space is beeing showing. I don't know why this happens and I don't know how to remove these classes or if there's another solution.
How could I solve this ?
View
<ion-view>
<div class="item item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="text" ng-model="pesquisar" placeholder="O que procura ?">
</label>
</div>
<ion-content>
<ion-list>
<ion-item class="item item-thumbnail-left"
ng-repeat="empresa in empresas | filter:pesquisar"
ng-click="getEmpresa({{empresa.id}})" >
<img ng-src='{{empresa.imagem}}'>
<h2 class="customTitle">{{empresa.razaoSocial}}</h2>
<div style="margin-bottom:20px">
<ul>
<li ng-repeat="ce in empresa.categorias | filter:pesquisar"
class="customListInline customCategoriaEmpresa">{{ce.descricao}}</li>
</ul>
</div>
<div class="row row-bottom">
<div class="col col-25"><i class="icon ion-thumbsup icon-24px"></i></div>
<div class="col col-25"><i class="icon ion-chatbox icon-24px"></i></div>
<div class="col col-25">
<i class="icon ion-ios-telephone icon-24px"></i>
</div>
</div>
</ion-item>
<ion-infinite-scroll on-infinite="loadMore();" distance="1%" ng-if='!moreData'></ion-infinite-scroll>
</ion-list>
</ion-content>
</ion-view>
As per #MikeT's comment, but i think you want:
<ion-content style="top:0px">
Add this attribute to your ion-content
hide-nav-bar="true"

Ion-slides is shown in the view only if ion-content scroll=false

I need a scrollable page with ion-slides directive. If i set scroll=true in ion-content the slider is not shown on the page. I'm running ionic 1.3.1 and using the new ion-slide directive. This is my code,
<ion-content class="padding" scroll="false">
<div class="list card">
<div class="item no-padding">
<img class="full-image" src="http://12.jpg">
</div>
<div class="item ">
<button class="button icon-left ion-android-navigate button-stable">Directions </button>
<button class="button icon-left ion-ios-telephone button-stable">Call </button>
<button class="button icon-left ion-android-share-alt button-stable">Share</button>
</div>
</div>
<div class="slide-wrapper1">
<ion-slides options="options" slider="data.slider">
<ion-slide-page>
<img src="http://placehold.it/375x468/">
</ion-slide-page>
<ion-slide-page>
<img src="http://placehold.it/375x468/0000">
</ion-slide-page>
<ion-slide-page>
<img src="http://placehold.it/375x468/">
</ion-slide-page>
</ion-slides>
</div>
<h4>About </h4>
<div class="card">
<div class="item item-text-wrap">
This is a basic Card which contains an item that has wrapping text.
</div>
</div>
</ion-content>
what am i doing wrong, How do i get the ion-slides to work in a scrollable page?
Thanks for any help
How about wrapping the inside of your ion-slide-page with an ion-content like:
<div class="slide-wrapper1">
<ion-slides options="options" slider="data.slider">
<ion-slide-page>
<ion-content has-header="true" padding="true">
<img src="http://placehold.it/375x468/">
</ion-content>
</ion-slide-page>
</ion-slides>
</div>
I would like to note that this should work with Android. I think I had to remove the ion-content for iOS to work on the device.
*Edit - Also, my outside ion-content is set to true

Ionic framework and bottom fixed content

I am trying to implement a simple page with a login form (user/password text input + 1 button). I would like to fix this form to the bottom of a ion-content. But it does not work.
HTML:
<ion-view hide-nav-bar="true">
<ion-content padding="true">
<img class="logo" src="img/logo.jpeg" />
<div class="login-form">
<div class="list">
<label class="item item-input light-text-input">
<input type="text" placeholder="user" ng-model="user">
</label>
<label class="item item-input light-text-input">
<input type="text" placeholder="password" ng-model="password">
</label>
</div>
<div class="row">
<div class="col">
<button class="button button-block button-energized">Login</button>
</div>
<div class="col">
<button class="button button-block button-positive">FB Login</button>
</div>
</div>
<p class="text-center">Forgot password</p>
</div>
</ion-content>
I would like to set as "fixed" the div.login-form.
Using the following CSS does not work:
{
position: fixed;
bottom: 20px;
}
Also, with position:fixed input texts seem no more editable.
In Ionic, is it possible to fix part of the content to bottom?
Thx!
You could use anythnig out the ion-content with a button inside of it.
Demo
<ion-list>
<ion-item ng-repeat="item in items"
item="item"
href="#/item/{{item.id}}">
Item {{ item.id }}
</ion-item>
</ion-list>
</ion-content>
<div class="fixed-outside">
<div class="row">
<div class="col">
<button class="button button-circle button-energized icon ion-log-in"></button>
</div>
<div class="col">
<button class="button button-circle button-positive icon ion-social-facebook"></button>
</div>
</div>
<p class="text-center">Forgot password</p>
</div>
</div>
How about just using the default ionic tab bar and just change the height to auto or any px that you wishes. Just make sure you put the code below ion-content tag.
Code:
<ion-content padding="true">
</ion-content>
<div class="tabs tabs-dark" style="height:auto;">
<div class="row">
<div class="col">
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" >
</label>
</div>
<div class="row">
<div class="col">
<button class="button button-block button-positive">LOGIN</button>
</div>
</div>
</div>
</div>
</div>
Codepen example : http://codepen.io/ridwan/pen/JozeYK
You could use a directive to calculate the height of the form. It will recalculate on window resize. I haven't tested navigating away from the page.
Codepen
Relevant HTML
<ion-view hide-nav-bar="true" ng-controller="MainCtrl">
<ion-content padding="true" scroll="false">
<ion-scroll scroll-height>
Content to go above the form
</ion-scroll>
<div class="login-form">
Login form
</div>
</ion-content>
</ion-view>
CSS
.scroll-content {
position: relative;
}
div.login-form {
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
Directive
.directive('scrollHeight', function($window) {
return {
link: function(scope, element, attrs) {
scope.onResize = function() {
var winHeight = $window.innerHeight;
var form = angular.element(document.querySelector('.login-form'))[0];
var formHeight = form.scrollHeight;
var scrollHeight = winHeight - formHeight;
element.css("height", scrollHeight + "px");
}
scope.onResize();
angular.element($window).bind('resize', function() {
scope.onResize();
})
}
}
})
all the elements which you want to have fixed in the bottom should be out of the ion-content. This is a working example:
<ion-view title="Test" hide-nav-bar="true">
<ion-content class="padding">
<img class="logo" src="img/logo.jpeg" />
</ion-content>
<!-- align to the bottom of the page -->
<div class="login-form" style="position: absolute; bottom: 0px; width: 100%">
<div class="list">
<label class="item item-input light-text-input">
<input type="text" placeholder="user" ng-model="user">
</label>
<label class="item item-input light-text-input">
<input type="text" placeholder="password" ng-model="password">
</label>
</div>
<div class="row">
<div class="col">
<button class="button button-block button-energized">Login</button>
</div>
<div class="col">
<button class="button button-block button-positive">FB Login</button>
</div>
</div>
<p class="text-center">Forgot password</p>
</div>
I just find a simple solution, which works fine for me.
<ion-content>
<ion-scroll style="height: 300px">
<div style="height: 1000px">
your scroll content
</div>>
</ion-scroll>
<div>
your fixed div, maybe a form
</div>
</ion-content>
you can also refer to: http://ionicframework.com/docs/api/directive/ionScroll/
I hope it helps.
I ended up more or less circumventing Ionic's intentions and using a flex box layout:
<ion-view view-title="My Title" class="flex-wrapper" hide-nav-bar="true">
<div class="flex-head"> ... </div>
<div class="flex-body flex-1"> ... </div>
<div class="flex-foot"> ... </div>
</ion-view>
The SCSS, using Ionic's mixins, looks something like this:
.flex-wrapper {
#include display-flex;
#include flex-direction(column);
...
}
.flex-1 {
#include flex(1);
...
}
actually i am using the version Ionic 2.0.0 i resolve with this code
<ion-fixed class="fixed">
<button fab fab-right fab-bottom>
${{ totalPrice }}
</button>
</ion-fixed>
in your File Scss
.fixed {
bottom: 50px;
right: 10px;
}