Has-Header + Ionic-Side-Menus Not Working

ionic-v1
1

Hey everyone I’ve been running into some issues with the header overlapping the content and scrolling not happening on the side menus.

Although I’ve taken it out from this snippet, i’ve tried putting class/attr has-header in just about every possible combination:

<ion-side-menus>

  <ion-side-menu-content>

    <ion-header-bar class="bar-dark">
      <button class="button icon ion-arrow-left-a" ng-click='back()'></button>
      <h1 class="title">Ionic Shopping Checkout</h1>
      <button class='button icon ion-bag' ng-click='toggleRightSideMenu()'></button>
    </ion-header-bar>

    <ion-purchase></ion-purchase> // custom directive

    <ion-purchase-footer></ion-purchase-footer> // custom directive
    
  </ion-side-menu-content>

  <ion-side-menu side="right">
    <ion-cart has-header='true' ng-controller='CartController'></ion-cart> // custom directive
  </ion-side-menu>

</ion-side-menus>

Additionally, my ng-repeat of items in the side menu isn’t scrolling, even when I nest them in an ion-scroll element. This is likely a completely unrelated issue, however I’m curious if anyone has come across that issue too.

Thanks for all the help in advance!

2

What version of Ionic were you using? There was an issue in beta 5, so we pushed a hot fix to handle this. Can you try the nightly builds.

3

What is not working? What do ‘some issues’ mean? What device are you testing on? What version of Ionic?

4

@andy, @mhartington . I’m testing on ios on beta-5. However, I just realized that “The has-header, has-footer, and has-tabs attributes have been removed. Ionic now will automatically reposition and resize the content depending on what surrounding widgets are present”

With that said, I fixed the header issue by nesting the ion-purchase element in an ion-content like so:

<ion-side-menus>

  <ion-side-menu-content>

    <ion-header-bar class="bar-dark">
      <button class="button icon ion-arrow-left-a" ng-click='back()'></button>
      <h1 class="title">Ionic Shopping Checkout</h1>
      <button class='button icon ion-bag' ng-click='toggleRightSideMenu()'></button>
    </ion-header-bar>
      <ion-content>
         <ion-purchase></ion-purchase> // custom directive
      </ion-content>
    <ion-purchase-footer></ion-purchase-footer> // custom directive

  </ion-side-menu-content>

  <ion-side-menu side="right">
    <ion-cart has-header='true' ng-controller='CartController'></ion-cart> // custom directive
  </ion-side-menu>

</ion-side-menus>

Thanks!

5

Glad to see you got this resolved :smile:

1 Like