Ion-content and ion-header-bar overlap inside ion-slide-box

1

I want to put ion-header-bar and ion-content into each slide of the ion-slide-box but what I notice is that the ion-content is not automatically placing itself in the layout after the ion-header-bar like it does in a normal page. When I put it inside the ion-slide-box what I see is ion-content over lapping with my ion-header-bar. My code is below

<ion-view title="Statistics">
     <ion-slide-box show-pager="true" on-slide-changed="slideChanged()" class="has-header" style="position: absolute; top: 10px; bottom: 0;left: 0;right: 0;">
         <ion-slide ng-repeat="x in players | orderBy:['Score', '-MatchesPlayed']:true">
              <ion-header-bar class="bar-subheader" padding="false" style="height: 120">
                    <h2>Ion Header Bar contents</h2>
              </ion-header-bar>
              <ion-content class="has-header has-subheader">
                    <h2>Ion Content Data</h2>
              </ion-content>
              <ion-footer-bar style="height: 50px">
              </ion-footer-bar>
           </ion-slide>
      </ion-slide-box>
 </ion-view>

If anyone can tell me how to get the ion-content to adjust for the ion-header-bar and not overlap with it in the layout. I would really appreciate it. Thanks