the parent page:
<ion-view view-title="my account" >
<ion-nav-bar class="bar-assertive" align-title="center" ></ion-nav-bar>
<ion-content >
<ion-list>
<ion-item>
<ion-item class="item-remove-animate item-icon-left item-icon-right" type="item-text-wrap" ui-sref="tab.modipass">
<i class="icon ion-ios-unlocked-outline"></i>
<div>company profile</div>
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
the child page:
<ion-view view-title="about company" on-swipe-right="closePage()">
<ion-nav-bar class="bar-assertive" align-title="center">
<ion-nav-buttons side="left">
<button class="button button-clear button-light" ng-click="closePage()">
<i class="ion-ios-arrow-back" style="font-size:20px"></i>
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content class="padding">
<ul class="list">
<li class="item item-text-wrap item-borderless">about company</li>
</ul>
</ion-content>
</ion-view>
both the parent page and the child page have nav-bar, they have the same assertive color and different title.
when swipe from child back to parent, the child page nav bar becomes blank,no title,no color. the parent page nav bar is normal.
the above situation only happens when swiping.
Please help to check why?
I think it's a bug on Ionic, now I solved it by adding a CSS class
ion-nav-bar.hide {
display: block !important;
}
Remember that is a workaround, follow this issue to tracking the fix.
Related
home.html
<ion-scroll scrollX="true">
<button ion-button color="danger" *ngFor="let item of allservices">
<p>{{item.name}}</p>
</button>
</ion-scroll>
How to show ion-scroll without showing the scroll bar.
I'm developing an ionic app and I need to align the navbar back button on right side. The following is my code:
<ion-view title="Home" ng-controller="HomeCtrl" style="padding-top: 50px">
<ion-nav-bar class="bar-balanced bar-dark">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-content scroll="true">
<ion-list>
<ion-item ng-repeat="item in items" href="#/res/{{item}}">
{{item.toUpperCase()}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
And I've tried following code for aligning button using ion-nav-buttons:
<ion-view title="Home" ng-controller="HomeCtrl" style="padding-top: 50px">
<ion-nav-bar class="bar-balanced bar-dark">
<ion-nav-buttons side="right">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content scroll="true">
<ion-list>
<ion-item ng-repeat="item in items" href="#/res/{{item}}">
{{item.toUpperCase()}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
But the above code throwing error like:
Error: [$compile:ctreq] Controller 'ionNavBar', required by directive 'ionNavBackButton', can't be found!
http://errors.angularjs.org/1.4.3/$compile/ctreq?p0=ionNavBar&p1=ionNavBackButton
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:13380:12
at getControllers (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21319:19)
at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21445:33)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20853:13)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20857:13)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20857:13)
at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:21457:24)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20853:13)
at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20857:13)
at publicLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20728:30) <ion-nav-bar class="bar-balanced bar-dark nav-bar-container" nav-bar-transition="ios">(anonymous function) # ionic.bundle.js:25642
ionic.bundle.js:1173 'webkitMovementX' is deprecated. Please use 'movementX' instead.
You can use this code:
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-arrow-left-c" ng-click="goBack()">back
</button>
</ion-nav-buttons>
and in your controller(s):
$scope.goBack = function() {
$ionicHistory.goBack(-1);
}
P.S.: in this case no <ion-nav-back-button></ion-nav-back-button> is used
Here is an example: http://codepen.io/beaver71/pen/NNWZBp
I am trying to add search bar into header on one of the page.
<ion-view view-title="">
<ion-nav-buttons side="left">
<label class=" item item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="Search">
</label>
</ion-nav-buttons>
<ion-content>
Search content
</ion-content>
</ion-view>
The search bar does show up in the header as expected. But how can I get the search field to be 100% width across the header? I did try to apply:
.buttons-left, .left-buttons{
width:100% !important;
}
It does work. But the problem is it affect all other pages as well. I tried to add class and id to ion-nav-buttons, but it doesn't shows up.
How can I apply custom width to ion-nav-buttons only on specific page?
I am not sure if that is the best place where to put a search field:
<ion-nav-buttons>
You can define a custom header for your specific view:
<ion-header-bar class="bar-positive">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="Search" class="search-bar">
</label>
<button class="button button-clear">Cancel</button>
</ion-header-bar>
and use the directive hide-nav-bar="true" in your view to tell the current view to hide the navbar:
<ion-view view-title="home" hide-nav-bar="true">
...
</ion-view>
This is your end result:
<ion-view view-title="home" hide-nav-bar="true">
<ion-header-bar class="bar-positive">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="search" placeholder="Search" class="search-bar">
</label>
<button class="button button-clear">
Cancel
</button>
</ion-header-bar>
<ion-content padding='true' scroll='false' has-footer='false'>
<div class="card">
<div class="item item-text-wrap">
HOME PAGE
</div>
</div>
</ion-content>
</ion-view>
I've also used some styling to change the result:
.search-bar
{
width:100% !important;
background: inherit;
height: inherit !important;
}
and this is how it looks in a Plunker.
I have an ionic slide box with 4 slides. You can switch between slides by clicking buttons on the bottom of the screen or you can simply scroll with your finger. Class 'active' needs to be added to the button when it's corresponding slide is active.
For example, if the second slide is active I want second button to have class 'active'. When you move to third slide (either by clicking third button or by sliding the screen), class 'active' is removed from second button and added to third button.
Classes now change when you click on a button but not when you scroll between slides. How do I fix this using AngularJS?
Link to Codepen: http://codepen.io/lu-kanemon/pen/doBNGz
Here is my code:
menu.html
<ion-view view-title="Menu">
<ion-content class="padding">
<ion-slide-box show-pager="false" on-slide-changed="slideHasChanged($index)">
<ion-slide>
<h1 class="slide-title"> Matches </h1>
</ion-slide>
<ion-slide>
<h1 class="slide-title"> Fitting jobs </h1>
</ion-slide>
<ion-slide>
<h1 class="slide-title"> Interesting events </h1>
</ion-slide>
<ion-slide>
<h1 class="slide-title"> Group conversations with open positions </h1>
</ion-slide>
</ion-slide-box>
</ion-content>
<div class="contacts-filters felix-filters button-bar">
<a class="button button-stable" ng-class="{active: selected=='m'}" ng-click="slide(0); selected='m'"><i class="fa fa-users"></i></a>
<a class="button button-stable" ng-class="{active: selected=='j'}" ng-click="slide(1); selected='j'"><i class="fa fa-suitcase"></i></a>
<a class="button button-stable" ng-class="{active: selected=='e'}" ng-click="slide(2); selected='e'"><i class="fa fa-map"></i></a>
<a class="button button-stable" ng-class="{active: selected=='c'}" ng-click="slide(3); selected='c'"><i class="fa fa-comments"></i></a>
</div>
</ion-view>
MenuCtrl.js
myApp
.controller('MenuCtrl', function($scope, $stateParams, $ionicSlideBoxDelegate){
//switch slides
$scope.slide = function(to) {
$scope.current = to;
$ionicSlideBoxDelegate.slide(to);
}
});
Just use addClass(className) and removeClass(className) functions
currentElement.removeClass('active');
nextActiveElement.addClass('active');
You can initialize a variable (current) with the first one (if there is at least one), then once the next active element is fired remove the class from current, then set the newest element to current. This repeats over and over!
I'm new to ionic framework. I need to follow ionic tags to do sidemenu overlay. Please help me.
The default style of sidemenu gives only drag style but i need the side menu as a overlay.
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content>
<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-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ng-click="login()">
Login
</ion-item>
<ion-item menu-close href="#/app/search">
Search
</ion-item>
<ion-item menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
It's a toggleable side menu. If you want an overlay unfortunately you'll have to make your own.