I’m using Ionic 1.3.2 and build it to Android platform, but its put has-header and has-tabs-top into a <ion-content> automatically. I want to know how could I do remove this or there’s another solution ?
Hey @fernandopaiva you have to remove ion-header-bar below code
<ion-view>
<ion-header-bar class="bar bar-header App-header">
</ion-header-bar>
<ion-content class="has-header">
from your .html file from www\templates folder.
@PremAgrawal but I haven’t . I will post all code that I’m trying if you can help me I will glad.
index.html
<body ng-app="starter" ng-controller="MainCtrl" animation="slide-left-right-ios7">
<!-- The nav bar that will be updated as we navigate -->
<ion-nav-bar class="bar bar-header bar-assertive" align-title="center">
</ion-nav-bar>
<!-- where the initial view template will be rendered -->
<ion-nav-view></ion-nav-view>
</body>
sidemenu.html
<ion-side-menus ng-controller='CtrlSideMenu' data-ng-init="loadImage();">
<!-- Center content -->
<ion-side-menu-content>
<ion-nav-bar class="bar bar-header bar-assertive" >
<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="tabsContent" class="has-header"></ion-nav-view>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-header-bar>
<div>
<div class="row">
<div class="col col-90 text-center">
<img ng-src="{{imageURL}}" class="round_image">
</div>
</div>
<div class="row">
<div class="col col-90 text-center customTitle">{{nome}}</div>
</div>
</div>
</ion-header-bar>
<ion-content style="margin-top:200px;">
<ion-list>
<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-footer-bar class="bar bar-footer">
<h6>Desenvolvido por Iguana Sistemas</h6>
</ion-footer-bar>
</ion-side-menu>
</ion-side-menus>
tabs.html
<ion-view view-title="MeuPedido" align-title="center">
<ion-tabs class="tabs-top tabs-stable">
<ion-tab icon="icon ion-fork" title="Empresas">
<ion-nav-view name="tab-empresas" title="Empresas"></ion-nav-view>
<!--<ion-nav-view name="tab-produtos"></ion-nav-view>
<ion-nav-view name="tab-qtdProduto"></ion-nav-view>-->
</ion-tab>
<ion-tab icon="ion-ios-cart" title="Carrinho"></ion-tab>
</ion-tabs>
</ion-view>
empresas.html here is the problem on ion-content is adding automatically has-header and has-tabs-top
<ion-content>
<ion-list>
<ion-item class="item item-thumbnail-left"
ng-repeat="empresa in empresas | filter:pesquisar"
ng-click="getEmpresa({{empresa.id}})" >
<img ng-src='{{empresa.imagem}}'>
<h2 class="customTitle">{{empresa.razaoSocial}}</h2>
<div style="margin-bottom:20px">
<ul>
<li ng-repeat="ce in empresa.categorias | filter:pesquisar"
class="customListInline customCategoriaEmpresa">{{ce.descricao}}</li>
</ul>
</div>
<div class="row row-bottom">
<div class="col col-25"><a href="#"><i class="icon ion-thumbsup icon-24px"></i></a></div>
<div class="col col-25"><a href="#"><i class="icon ion-chatbox icon-24px"></i></a></div>
<div class="col col-25">
<a href="tel:{{item.telefone}}"><i class="icon ion-ios-telephone icon-24px"></i></a>
</div>
</div>
</ion-item>
<ion-infinite-scroll on-infinite="loadMore();" distance="1%" ng-if='!moreData'></ion-infinite-scroll>
</ion-list>
</ion-content>
</ion-view>
Look at the image below
Remove bar-header class from your index.html file and try again
<ion-nav-bar class="bar bar-header bar-assertive" align-title="center">
1 Like
@PremAgrawal its works fine, thanks a lot. But now I have another problem, I’m using ion-nav-bar on index.html because before to enter inside app I have a screen to access that contain login from facebook or login from app and if I remove ion-nav-bar on index.html the header is not to shown and I want to show the header in this place without ion-side-menus and after make login the ion-side-menus is shown. Please, look at the image.
redirecting to ion-side-menus after login by facebook
//login by facebook
function doLogin(Usuario){
$ionicLoading.show();
UserAPIService.doLogin(Usuario)
.success(function(data){
var status = parseInt(data.status);
if(status == 1){
$ionicLoading.hide();
UserSessionFactory.setUserSession(data.id, data.nome, data.email,
data.loginBy, data.idFacebook, data.imagem);
$state.go('app.tabs.empresas'); //call empresas
ClearHistoryService.clear();
}else{
$ionicLoading.show({ template: data.msg, noBackdrop: true, duration: 2000 });
}
})
.error(function(data, status){
$ionicLoading.show({ template: APP_MESSAGES.falhaLogin, noBackdrop: true, duration: 2000 });
});
}
Here my app.js
.state('main', {
url: "/main",
templateUrl: 'templates/main.html',
controller: 'MainCtrl'
})
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'UserCtrl'
})
.state('addUsuario', {
url: '/addUsuario',
templateUrl: 'templates/addUsuario.html',
controller: 'UserCtrl'
})
.state('app',{
url: '/app',
abstract:true,
templateUrl: 'templates/sidemenu.html',
})
.state('app.tabs', {
url: '/tabs',
views: {
'tabsContent': {
templateUrl: 'templates/tabs.html'
}
}
})
.state('app.tabs.empresas', {
url: '/empresas',
views: {
'tab-empresas': {
templateUrl: 'templates/empresas.html',
controller: 'EmpresaCtrl'
}
}
})
You just have to code it in .html with out <ion-nav> & having has-header.
1 Like
What @fernandopaiva is referring to is that Ionic adds these classes behind the scenes. I am currentlyexperiencing the same behavior.