Elements in the ion-navigation bar are impregnable, not functioning
I am creating an ionic map app and trying to add a handy search bar to the navbar. Anything I add to the left side of the navbar using the ionic navbar buttons = "left" (search icon, input panel) cannot be clicked / focused. Oddly enough, I can click on the areas of these items if they go out of the navbar. Code and test images below:
<body ng-app="radar">
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar bar-positive" ng-controller="MenuController" delegate-handle="navBar" align-title="center">
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-navicon" menu-toggle="right">
</button>
</ion-nav-buttons>
<ion-nav-buttons side="left">
<div class="searchBar">
<i class="icon ion-search placeholder-icon searchButton" ng-click="newSearch()"></i>
<div class="searchTxt" ng-show="showSearch">
<div class="bgdiv"></div>
<div class="bgtxt">
<input type="text" class="searchInput" placeholder="Search..." ng-model="search">
</div>
</div>
</div>
</ion-nav-buttons>
</ion-nav-bar>
<ion-content ng-controller="MapController" class="mapCanvas has-header">
<ion-nav-view></ion-nav-view>
<div id="map" data-tap-disabled="true"></div>
<button id="GeoButton" ng-click="geoLocate()"><i class="icon ion-android-locate"></i></button>
</ion-content>
</ion-side-menu-content>
<!-- RIGHT SLIDE MENU -->
<ion-side-menu class="rightMenu" side="right">
<header class="bar bar-dark bar-header rightMenuHeader">
<h1 class="title">Right Menu</h1>
</header>
<ion-content class="has-header">
<ion-nav-view name="RIGHT MENU"></ion-nav-view>
<div class="button-bar logReg">
<a class="button" ng-click="">Login</a>
<a class="button" ng-click="">Register</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
and some CSS:
.searchBar {
color: white;
margin: 0 !important;
padding: 0;
}
.searchBar .icon {
font-size: 27px;
line-height: 1.2;
position: fixed;
color: white;
padding-left: 6px;
padding-right: 6px;
}
.searchBar .searchTxt {
left: 55px;
width: 50%;
position: fixed;
height: calc(100% - 10px);
color: white;
}
.searchIcon {
position: fixed;
width: 50px;
height: 50px;
background-color: black;
}
.searchBar .searchTxt > .bgdiv {
background-color: darkBlue;
width: 50%;
height: 100%;
position: absolute;
opacity: 0.3;
}
.searchBar .searchTxt > .bgtxt {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
}
.searchBar .searchTxt input {
background-color: inherit;
color: white;
padding-left: 5px;
padding-right:5px;
}
.rightMenu {
background-color: rgb(50,50,50);
}
+3
source to share
1 answer
Based on your code, you should have a controller named 'MenuController' in www / js / controllerlers.js with newSearch () function.
This is what I am using in my controllers.js file to capture the click button on the navbar using the NavCtrl controller and the .getPhoto () function
.controller('NavCtrl', function($scope, $cordovaCamera) {
$scope.getPhoto = function() {
//alert("button clicked");
navigator.camera.getPicture(function(imageURI) {
}, function(err) {
console.err(err);
});
}
+1
source to share