"Subheader" hides under "ion-nav-bar" if screen gets touched


#1

I am handling a lot of different view states and I must be making a wrong call or have a controller issue because when I select anything other than my subheader it will reposition that subheader under my main header.

This is what is looks like



On startup

Header button for listview works BUT loads between the map and its zoom levels

If the map gets touched it repositions itself and hides behind the ion-nav-bar in my menu.html


images also seen in this stackoverflow question


Anytime I select the leaflet map it pushes my “Discover List” (in my discover-home.html) button under my apps ion-nav-bar in my discover-menu.html. In addition, you can see that this list view is in-between my map and the zoom icons, also if do not touch the map and I switch tabs and come back I cannot open the list again.

I’m not sure what is causing the problem and included some snippets in hopes someone could help me figure out what is causing the problem.


index.html

 <body ng-app="starter">
     <ion-nav-view></ion-nav-view>
  </body>

discover-tabs-controller.html

Note: This controls the tabs views (one of which is discover-home.html)

    <ion-view>
      <div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
    
    <ion-tabs class="tabs-positive tabs-icon-only" >
     <ion-content  has-subheader="true"></ion-content>
      
<!--HOME TAB [OPEN]-->
    <ion-tab title="Discover" icon-on="icon ion-home" icon-off="icon ion-home" 
      href="#/app/discover/home">
    
      <ion-nav-view cache-view="true" name="home-tab"></ion-nav-view>
        <!-- View For Home.html -->
      </ion-tab>
 <!--HOME TAB [CLOSED]-->  

 
     <!--MORE TABS HERE-->
    
    </ion-content>
    </ion-tabs>
      </div>
    </ion-view>

Discover-home.html

<ion-view view-title="Home">


<!--SUBHEADER BUTTON: DISPLAY LISTVIEW -->
    <div ng-controller="FrostCtrl" class="bar bar-subheader button bar-balanced" ng-click="pushFrost()">
        <h2 class="title">{{title}} List</h2>
    </div>
 


  <!--DISPLAY OVERLAY WITH LIST-->
    <ion-pane ng-controller="OverlayCtrl" class="dark-overlay" ng-show="showOverlay">
  
      <ion-content class="has-subheader">
     
        <button class="button button-block button-outline button-balanced" ng-click="hideFrost()">Dismiss
        </button>
      
        <ion-list>
            <ion-item ng-repeat="item in items" class="dark-item">
              {{item.text}}
           </ion-item>
        </ion-list>

        </ion-content>
    </ion-pane>




  <!--LEAFLET MAP -->
    <leaflet class="has-subheader padding"center="nassau" paths="paths" tiles="tiles" markers="markers" defaults="defaults">
      </leaflet>


</ion-view>

controller.js

          angular.module('starter.controllers', [])
            ...
        
    
    // #######| LEAFLET MAP  |#######
        .controller('ActivityCntl', [ '$scope', 'leafletData', function($scope, leafletData) {
           
           var tileSource = {
                onlineTiles: {
                    url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" 
                },
                
            };
        
            angular.extend($scope, {
                
                nassau: {
                lat: 25.074521,
                lng: -77.318191,
                zoom: 13
                .........
            });
        }])
        
  
  // #######| SHOW OVERLAY  |#######
        .controller('FrostCtrl', ['$scope', '$rootScope', '$compile', function($scope, $rootScope, $compile) {
          $scope.pushFrost = function() {
            var el = angular.element(document.getElementById('myPane'));
            el.attr('frost', '');
            el = $compile(el)($scope);
            $rootScope.showOverlay = true;
          };
        }])
    

    //#######| DISPLAYS CONTENTS |##########
        .controller('OverlayCtrl', function($scope, $rootScope, $compile) {
          $scope.items = [];
          for(var i = 0; i < 5; i++) {
            $scope.items.push({
        
              text: 'Whatever ' + (i+1)
        
               });
          }
          $scope.hideFrost = function() {
            $rootScope.showOverlay = false;
            var el = angular.element(document.getElementById('myPane'));
          };
        })

app.js

    config(['$stateProvider', '$urlRouterProvider','$locationProvider',function($stateProvider, $urlRouterProvider, $locationProvider) {
      $stateProvider
    
    .state('app', {
        name: 'app',
        url: "/app",
        abstract: true,
        templateUrl: "templates/menu.html",
        controller: 'AppCtrl'
      })
    
    .state('app.discover', {
        name: 'app.discover',
        url: "/discover",
        views: {
          'menuContent': {
            templateUrl: "templates/discover-tabs-controller.html"
          }
        }
      })
    
    
// for my discover-home.html
    .state('app.discover.home', {
 
    url: "/home",
    views: {
       'home-tab': {
       templateUrl: "templates/discover-tabs/discover-home.html",
       controller:  'ActivityCntl'
           },
           'discover-home-listview': {
       templateUrl: "templates/discover-tabs/discover-home.html",
      
           }
    }
  })

menu.html

Note: Just in case. This controls the sidemenu items

    <ion-side-menus enable-menu-with-back-views="false">
      <ion-side-menu-content>

//IT GETS PUSHED UNDER THIS
        <ion-nav-bar class="bar-calm">
          <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">MYApps</h1>
        </ion-header-bar>
        <ion-content>
          <ion-list>
            <ion-item menu-close ng-click="login()">
            <i class="icon ion-person"></i>
              Login
            </ion-item>
            <ion-item menu-close href="#/app/discover">
             <i class="icon ion-location"></i>
              Discover
            </ion-item>
            <ion-item menu-close href="#/app/map">
            <i class="icon ion-map"></i>
              Map
            </ion-item>
          
          </ion-list>
        </ion-content>
      </ion-side-menu>
    </ion-side-menus>

#2

I fixed the subheader from hiding under my main header by changing
this

<div class="bar bar-subheader....

to this

<ion-header-bar class="bar bar-subheader...

as some other similar posts suggested. Hope this helps someone. I guess it’s just good practice to use “ion” calls to avoid issues like this.

However, I cannot open the list again if I just around in different tabs and go back. Not sure if it’s view or controller issue. I’ll keep tinkering.