I've this code below, it works fine on chrome browser for desktop, but when I run the app on android device, I can scroll the page but the scrollbar is not visible. Can you help me? This is my code:
<ion-view>
<ion-nav-title class="title title-center title-balanced">
{{confissaoTitle}}
</ion-nav-title>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content padding="true">
<div ng-include="capitulourl"></div>
</ion-content>
<div class="bar bar-footer bar-positive">
<div class="button-bar">
<a class="button" ng-click="anterior('#/app/capitulo/{{indice.id}}/{{confissaoTitle}}/{{confissaoId}}/{{ultimoCapitulo}}')" ng-disabled="capituloId == 1">Anterior</a>
<a class="button" ng-click="indice('#/app/capitulo/{{indice.id}}/{{confissaoTitle}}/{{confissaoId}}/{{ultimoCapitulo}}')">Índice</a>
<a class="button" ng-click="proximo('#/app/capitulo/{{indice.id}}/{{confissaoTitle}}/{{confissaoId}}/{{ultimoCapitulo}}')" ng-disabled="ultimoCapitulo == capituloId">Próximo</a>
</div>
</div>
</ion-view>
Related
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
I have tried several code samples to get a back button in my home page. I couldnt see the nav back button. Where i am wrong?
<ion-side-menus enable-menu-with-back-views="true">
<ion-nav-bar class="bar-dark">
<ion-nav-back-button class="button-clear">
<i class="button button-icon my-back-button"></i>
</ion-nav-back-button>
</ion-nav-bar>
<ion-side-menu-content>
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="right">
<ion-header-bar class="dark-bg expanded">
<span>R</span>
<p align="center"> My App</p>
</ion-header-bar>
<ion-content class="stable-bg has-expanded-header">
<ion-list>
<ion-item nav-clear menu-close ui-sref="app.settings">
Settings
</ion-item>
<ion-item nav-clear menu-close ui-sref="app.profile">
Profile
</ion-item>
<ion-item nav-clear menu-close ui-sref="app.logout">
Log out
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Home page code
<ion-view title="Home">
<ion-content>
<div class="list card">
<a class="item item-icon-left assertive" ui-sref="makerequest">
<i class="icon ion-ios-list-outline"></i>
Make New Request
</a>
<a class="item item-icon-left assertive" ui-sref="viewrequest">
<i class="icon ion-ios-copy"></i>
View Request
</a>
</div>
</ion-content>
</ion-view>
Added my home page code above.
Regards,
Sabarisri
Does anyone know how can I add a back button to the second level? In my example I need the back button when I'm on the "Settings" page:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-clear" ng-click="goBack()">Back</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="primary"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" class="side-menu" slide-along offset="-15">
<ion-header-bar class="bar-dark">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<ul class="list">
<a href="#/event/settings" class="item" menu-close>Settings</a>
</ul>
</ion-content>
</ion-side-menu>
If I remove menu-close from the button, it's acting weird.
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.
I have a side menu:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive" align-title="center">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left" width="300">
<ion-content>
<div class="list">
<a class="item item-icon-left" ui-sref="app.bla" menu-close>
<i class="icon menu-icon ion-home"></i>
<h2>Bla</h2>
</a>
<a class="item item-icon-left" ui-sref="app.blub" menu-close>
<i class="icon menu-icon ion-person"></i>
<h2>Blub</h2>
</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
And i want to modify the title which is set in each view:
<ion-view view-title="MyTitle">
<ion-content>
</ion-content>
</ion-view>
How can i modify the title like setting it to bold or let it left align or right?