Develop Reference

Ionic running on ios, toolbar not fixed to top

my code: (i tried to change all navbars for toolbars, and also tried adding fixed attribute to the toolbars, and no luck). any page i scroll down in my iphone, the toolbar scrolls as well, and it doesn't happen in my android.
<ion-header>
<ion-navbar
color="danger"
hideBackButton>
<ion-title>
Home
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div *ngIf="checkVacio()" id="cartaInicial">
<img src="assets/images/lista.png" id="imagenInicial">
<p id="parrafo" >Para crear una lista solo debes <br> presionar el boton rojo</p>
</div>
<ion-list no-lines>
<ion-item id="items"
*ngFor="let lista of Listas"
[navPush]="listaTerminada"
[navParams]="lista"
>{{lista.listaNombre}}
<p>{{lista.nombre}}</p>
<button ion-button icon-only
item-end clear color="danger"
(click)="onDelete(lista.listaNombre)"
><ion-icon name="md-close"></ion-icon></button>
</ion-item>
</ion-list>
<ion-fab bottom right>
<button ion-fab mini
color="danger"
[navPush]="cadenasMercadosPage">
<ion-icon name="add"></ion-icon>
</button>
</ion-fab>
</ion-content>

You have to add this in your config.xml in order to avoid page from scrolling:
<preference name="DisallowOverscroll" value="true" />

SideMenu not appearing Ionic

I can't seem to make the side menu work. What happens is the that I can see the sidebar button, but the page content disappears and the button doesn't click to open anything.
here is my route.js
angular.module('app.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('jobStore', {
url: '/homePage',
views:{
'userSettings':{
templateUrl:"templates/userSettings.html",
contoller: 'sideMenuCtrl'
}
}
})
here is my side menu, called userSettings.html
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
<h1 class="title">Left</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item id="userSettings-list-item11" class=" ">Application</ion-item>
<ion-item id="userSettings-list-item12" class=" ">Dashboard</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
and my index.html
<div>
<ion-nav-bar class="bar bar-header bar-positive">
<ion-nav-buttons side="left">
<button menu-toggle="left"class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back">Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>

$scope value in ionic angularjs is not updates the side-menu

I am stuck with an issue in my ionic app that has a side menu with name and picture and it's parent and abstract:true. In that same controller, there is an update function where it updates scope.picture, but the side menu picture is not updated.
controller('AppCtrl', function($scope,$window,$rootScope,$location,$http,$state,$cordovaCamera,$ionicLoading,$q,login_Service)
{
$scope.user_Name=$rootScope.u_name;
$scope.uid=$rootScope.user_id;
$scope.pass=$rootScope.password;
$scope.user_Picture=$rootScope.pic;
$scope.whats=$rootScope.wh;
$scope.update_u=function(topic){
$scope.user_Picture=topic['picture'];
$scope.whats=topic['e_whats'];
}
});
this is side-menu template
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-light nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<!-- Sidebar Content -->
<ion-content class="gem-sidebar dark">
<!-- Profile Box - Extends ionic's .row -->
<div class="row gem-sidebar-profile-box">
<!-- Profile Thumb -->
<div class="col col-25">
<img src="img/gemionic/no-photo.jpg" ng-if="!user_Picture" class="gem-profile-image" alt="">
<img src="http://www.cssolutionshub.com/php/images/user_img/{{user_Picture}}" ng-if="user_Picture" class="gem-profile-image">
</div>
<!-- End Profile Thumb -->
<!-- Profile Name -->
<div class="col col-50">
<h6> <a menu-close href="#" ng-click="edit_prof()">Edit Profile</a></h6>
<h5 ng-if="user_Name !== undefined">{{user_Name}}</h5>
<h4>{{whats}}</h4>
</div>
<!-- End Profile Name <a -->
<!-- Account Settings Icon -->
<div class="col col-25 gem-text-center">
<i class="gem-profile-settings-icon ion-volume-high"></i>
</div>
<!-- End Account Settings Icon -->
</div>
<!-- End Profile Box -->
<!--<ion-list>
<ion-item class="item-ng-click" nav-clear menu-close ng-click="login()">Login</ion-item>
<ion-item nav-clear menu-close href="#/app/feed">Feed</ion-item>
<ion-item nav-clear menu-close href="#/app/start">Starter View</ion-item>
</ion-list> -->
</ion-content>
<!-- End sidemenu content -->
</ion-side-menu>
</ion-side-menus>
and this is my edit template where update function is clicked
<!-- Title for header bar (refer to www/index.html) -->
<ion-view title="Edit Profile">
<!-- ======================
LEFT SIDE BUTTON
====================== -->
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<!-- ======================
RIGHT SIDE BUTTON
====================== -->
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-checkmark-circled"></button>
</ion-nav-buttons>
<!-- ======================
MAIN CONTENT SECTION
====================== -->
<ion-content class="has-header gem-ion-content profile-edit">
<!-- ======================
GEMIONIC PROFILE ADD PICTURE BANNER
====================== -->
<!-- <div class="gem-profile-media">
<div class="gem-profile-details profile2">
<div class="text-center">
<i class="icon ion-plus-circled add-user-pic-icon"></i>
<p class="uppercase">Add user pic</p>
</div>
</div>
</div> -->
<img ng-if="topic.picture !== undefined && img===undefined " ng-src="http://www.cssolutionshub.com/php/images/user_img/{{topic.picture}}" alt="" width="100%" height="20%" ng-click="addMedia()">
<img ng-if="topic.picture === undefined && img===undefined" ng-src="img/gemionic/no-photo.jpg" width="100%" height="20%" ng-click="addMedia()">
<img src="{{img}}" ng-if="img!==undefined" width="100%" height="20%" ng-click="addMedia()">
<!-- ======================
END GEMIONIC PROFILE ADD PICTURE BANNER
====================== -->
<!-- Standard Ionic List -->
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">What Now</span>
<input type="text" ng-model="topic.whats">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Password</span>
<input type="password" ng-model="topic.password">
</label>
<button class="button button-full button-positive" ng-click='update_u(topic)'>
Update
</button>
<button class="button button-full button-positive" ng-click='go_feed()'>
Cancel
</button>
</div>
</ion-content>
</ion-view>

Try the following:
$scope.update_u=function(topic){
$scope.whats = topic.whats;
$scope.user_Picture=topic['picture'];
}

You may try this (inside the AppCtrl). The code inside $ionicView.beforeEnter function will be executed everytime the view is called:
$scope.$on('$ionicView.beforeEnter', function () {
// Code you want executed every time view is opened
$scope.update_u=function(topic){
$scope.user_Picture=topic['picture'];
$scope.whats=topic['e_whats'];
}
}

This also may be due to caching of your controller. You can stop it at the route.js by using cache: false, line. See this for a similar solution:

Ionic-side-menu hides all of my main content

I'm trying to implement a side-bar on my app so I am able to store menu related options inside it, but my issue is that whenever I integrate the ion-side-bar-menu, it always hides my main content.
For example, Whenever I don't add the side bar directives in my code, everything works as fine, even when I'm using the ionic-header-bar directives. But whenever I wrap my header bar inside the side-menu, everything outside of it disappears. Its as if the side-menu pushes or overlaps all other existing content unless I remove it from the DOM.
Refer to the screenshots below. I should be seeing the content to the right of the side-menu:
Thank you!
http://codepen.io/JalenMoorer/pen/MaGVKV?editors=101#0
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.css">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.6 used here -->
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<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>
<ion-content>
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<ion-slide>
<div class="box blue">
<h1>BLUE</h1>
</div>
</ion-slide>
<ion-slide>
<div class="box yellow">
<h1>YELLOW</h1>
</div>
</ion-slide>
<ion-slide>
<div class="box pink">
<h1>PINK</h1>
</div>
</ion-slide>
</ion-slide-box>
</ion-content>
</body>
</html>

You have to add the slide-box in an ion-content container & add the "has-header" class to it so that it can take the ion-nav-header into account. That said, here is the solution:
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.css">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.6 used here -->
<script src="//ajax.googleapis.com/ajax/libs/angular_material/0.6.1/angular-material.min.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<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-content class="has-header">
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<ion-slide>
<div class="box blue">
<h1>BLUE</h1>
</div>
</ion-slide>
<ion-slide>
<div class="box yellow">
<h1>YELLOW</h1>
</div>
</ion-slide>
<ion-slide>
<div class="box pink">
<h1>PINK</h1>
</div>
</ion-slide>
</ion-slide-box>
</ion-content>
</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>
<script>
angular.module('ionicApp', ['ionic', 'ngMaterial'])
.controller('MyCtrl', function ($scope) {
});
</script>
</body>
</html>

How do I get my ionic side menu button working?

I recently tried creating an ionic side menu. I had a problem where when I swiped the main body it opened up the menu. But I took the swipe function off and now I can't open the menu. I want to be able to click the navicon icon to be able to open the menu but don't know how to do it.
Here is the JavaScript:
.controller('TodoCtrl', function($scope, $timeout, $ionicModal, Projects, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
Here is the header code which contains the button:
<body ng-app="todo" ng-controller="TodoCtrl">
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()">
</button>
<h1 class="title">{{activeProject.title}}</h1>
<!-- New Task button-->
<button class="button button-icon" ng-click="newTask()">
<i class="icon ion-compose"></i>
</button>
</ion-header-bar>
<ion-content scroll="false">
<td-cards class="theLabel" id="card" ng-repeat="task in activeProject.tasks">
<td-card class="card-{{card.index}}">
<h4 style="text-align:center"> {{task.title}}</h4>
</td-card>
</td-cards>
Here is the menu content:
<ion-side-menu side="left">
<ion-pane ion-side-menu-content drag-content="false">
<ion-header-bar class="bar-dark">
<h1 class="title">Cards</h1>
</ion-header-bar>
<ion-content scroll="true">
<edge-drag-threshold="true" drag-content="true">
</ion-content>
</ion-pane>
</ion-side-menus>

Ionic has a handy menu-toggle directive to use so you can toggle the menu on a button like this.
http://ionicframework.com/docs/api/directive/menuToggle/
<ion-header-bar class="bar-dark">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
<h1 class="title">{{activeProject.title}}</h1>
<!-- New Task button-->
<button class="button button-icon" ng-click="newTask()">
<i class="icon ion-compose"></i>
</button>
</ion-header-bar>

In index.html, replace menu-toggle="left" with ng-click="toggleProjects()" and in app.js add this
$scope.toggleProjects = function() {
$ionicSideMenuDelegate.toggleLeft();
};

Here is what I do:
<ion-header-bar class="bar-dark">
<button class="button button-icon" ng-click="toggleSideMenu()">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">{{ activeProject.title }}</h1>
</ion-header-bar>
In app.js, check with $ionicSideMenuDelegate.isOpen()
$scope.toggleSideMenu = function() {
if ($ionicSideMenuDelegate.isOpen()) {
$ionicSideMenuDelegate.toggleLeft(false); // close
} else {
$ionicSideMenuDelegate.toggleLeft(); // open
}
};