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>
Related
I had this warning of trying to load angular more than once and I Solve it by changing the order of my script tags on my Index.html page, but the problem is that when I build the app It still doesn't work even after the warning has disappeared !
Those are the scripts that caused the issue in the first place
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-messages.js"></script>
I solved This by removing the script that calls ionic.bundle.js and by placing the other scripts after all the script are called
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy">
<title></title>
<!-- weather font -->
<link href="css/weather-icons.min.css" rel="stylesheet">
<!-- ionic gallery -->
<link href="lib/ionic-gallery/css/ion-gallery.css" rel="stylesheet">
<!-- compiled css output -->
<link href="css/ionic.app.css" rel="stylesheet">
<!-- style.css -->
<link rel="stylesheet" href="css/style.css" />
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- angular-nl2br js -->
<script src="lib/angular-nl2br/angular-nl2br.min.js"></script>
<!-- ionic number picker -->
<script src="lib/ionic-numberpicker/dist/ionic-numberpicker.bundle.min.js"></script>
<!-- elastic js-->
<script src="lib/angular-elastic/elastic.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- google maps javascript -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>
<!-- ionic gallery -->
<script src="lib/ionic-gallery/js/ion-gallery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-messages.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
<ion-nav-bar class="bar-balanced" align-title="center">
<!-- Back button -->
<ion-nav-back-button>
Back
</ion-nav-back-button>
<!-- Burger button -->
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
<!-- Cart button -->
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-android-more-vertical" ui-sref="home">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<!-- Main view content -->
<ion-nav-view animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-content>
<!-- User profile -->
<div class="text-center">
<a ui-sref="user({userId: 0})">
<img class="profile-picture circle" menu-close="" src="img/thumb/adam.jpg">
<h4>Adam Lambert</h4>
</a>
</div>
<!-- Menu -->
<div class="list" menu-close="">
<div class="item item-icon-left" ui-sref="home">
<i class="icon ion-ios-home-outline"></i>
Home
</div>
<div class="item item-icon-left" ui-sref="nearby">
<i class="icon ion-ios-location-outline"></i>
Nearby
</div>
<div class="item item-icon-left" ui-sref="chats">
<i class="icon ion-ios-email-outline"></i>
Message
<span class="badge badge-assertive">2</span>
</div>
<div class="item item-icon-left" ui-sref="ticket">
<i class="icon ion-android-plane"></i>
Flight booking
</div>
<div class="item item-icon-left" ui-sref="weather">
<i class="icon ion-ios-cloud-outline"></i>
Weather
</div>
<div class="item item-icon-left" ui-sref="gallery">
<i class="icon ion-images"></i>
Photos
</div>
<div class="item item-icon-left" ui-sref="friends">
<i class="icon ion-ios-people-outline"></i>
Friends
</div>
<div class="item item-icon-left" ui-sref="taxi">
<i class="icon ion-model-s"></i>
Taxi
</div>
<div class="item item-icon-left" ui-sref="shopping">
<i class="icon ion-bag"></i>
Shopping
</div>
<div class="item item-icon-left" ui-sref="currency">
<i class="icon ion-card"></i>
Currency
</div>
<div class="item item-icon-left" ui-sref="login">
<i class="icon ion-log-out"></i>
Logout
</div>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
And with those changements the warning disappeared but the app still doesn't work on the mobile device!
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>
I would like to achieve following effect in ionic framework. When i click on the arrow, the boxes will slide up as in the right. When i click the arrow or any other area except the text box, it will return to original position. It should be appearing under any view that have menu.html as abstract view. How could it be done? I try my first step as below but nothing is appear.
Plunkr here
<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 nav-clear menu-close href="#/app/search">
Search
</ion-item>
<ion-item nav-clear menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item nav-clear menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<!-- Nothing appear -->
<div style="position: fixed; bottom: 0; height: 200px;">Text here</div>
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:
I have created an app with Ionic side menu with tabs.
The menu appears if I use ionic v0.9.27 but it doesn't appear if the version is 1.0 and above.
Where am I going wrong ?
HTML Structure
<ion-nav-view>
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-view name="main"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left"> </ion-side-menu>
</ion-side-menus>
</ion-nav-view>
Working with 0.9.27
Plnrk : http://plnkr.co/edit/Sdsam9Tef0cy4bydbrxq?p=preview
Not working with 1.0
Plnrk : http://plnkr.co/edit/swWJph?p=preview
Working with 1.0 but with code embedded in html
Plnkr : http://plnkr.co/edit/ty6m8Q8DNQssZLKzOP8W?p=info
It's fascinating it even worked before.
This is how it should work: http://plnkr.co/edit/cmJYiT?p=preview
Side menu should be embedded into index.html, everything else should be separated into other files.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title>Ionic Framework Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"/>
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="app.js"></script>
</head>
<body>
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
<ion-nav-back-button class="button-icon"><span class="icon ion-ios7-arrow-left"></span></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<ion-header-bar class="bar bar-header bar-dark"></ion-header-bar>
<ion-content has-header="true">
<ion-list>
<ion-item href="#/" menu-close>Home</ion-item>
<ion-item href="#/about" menu-close>About</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
tabs.html
<ion-view title="Home">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Settings" icon="ion-gear-a" href="#/tab/settings">
<ion-nav-view name="settings-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Sign-Out" icon="ion-log-out">
</ion-tab>
</ion-tabs>
</ion-view>
plus other pages.....