How to remove has-header and has-tabs-top?


#1

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 ?


#2

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.


#3

@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


#4

@fernandopaiva

Remove bar-header class from your index.html file and try again

<ion-nav-bar class="bar bar-header bar-assertive" align-title="center">

#5

@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'
      }
    }
  })

#6

You just have to code it in .html with out <ion-nav> & having has-header.


#7

@PremAgrawal sorry, but I can’t understand your last suggestion. Please, can you explain me ?


#8

What @fernandopaiva is referring to is that Ionic adds these classes behind the scenes. I am currentlyexperiencing the same behavior.