the banner doesn't show for nest view structure

[TonyLuo]

when I try to use the banner in the view page which includes ion-nav-view, the banner doesn't show.

<ion-view view-title="booking">
  <ion-nav-title>
booking
  </ion-nav-title>
  <ion-nav-buttons side="primary">
    <button class="button button-clear" ng-click="showBanner()">
      Banner
    </button>
  </ion-nav-buttons>
  <ion-nav-buttons side="secondary">
    <button class="button button-icon icon ion-ios-search-strong" ng-click="showFilterBar()">
    </button>
  </ion-nav-buttons>

  <div class="bar bar-subheader">
    <ion-tabs class="tabs-striped tabs-color-assertive">
      <ion-tab title="processing" nav-clear ui-sref="main.booking.processing"></ion-tab>
      <ion-tab title="pending" nav-clear ui-sref="main.booking.pending"></ion-tab>
      <ion-tab title="all" nav-clear ui-sref="main.booking.all"></ion-tab>
    </ion-tabs>
  </div>

    <ion-nav-view name="bookingContent">
   </ion-nav-view>

</ion-view>

[hughred22]

I think I have the same issue. Do you see this error in your console?

TypeError: Cannot read property 'querySelector' of undefined at Scope.angular.module.factory.scope.show (ionic.content.banner.js:149)

[mark-monserrat]

I have the same issue. I'm using ion-nav-view as well. What I did was I edited line 149: getActiveView(body).querySelector('.scroll-content').appendChild(element[0]);

into:

document.querySelector('.scroll-content').appendChild(element[0]);

and it worked. Maybe you can use this as well as temporary workaround

[johnnyoin]

I have a similar issue. I was able to resolve it with https://github.com/djett41/ionic-content-banner/pull/28

[capoli]

it has to do with the getActiveView function i just saw: if you use for example tabs where 1 tab has multiple views you get following html/css structure:

if you use for example tabs where 1 tab hasn't multiple views, structure is as follow:

the getActiveView checks for a ion-view with an attribute nav-view="active" i noticed that an ion-view component also gets a class "pane", so i changed the getActiveView function to check for an elemant that has 2 attributes: nav-view="active" and class="pane" to solve the problem:

function getActiveView (body) { // get the candidate active views var views = body.querySelectorAll('[nav-view="active"][class="pane"]');