Slide Box sub header

ionic-v1
1

I’m stuck with ideas on how to create a fixed sub header within a slide box. So when the content of the slidebox overflows vertically (y axis) and the user scolls down a header for the slide box is always shown. The trick here is I want the user to be able to swipe left and right on the content and the header.
This sub header is in addition to the standard main header which would have screens title.

So my markup might look like this:
(where the div with class ‘my-slide-box-sub-header’ is always shown even when user scrolls down).
Also note the time entries list nested within the slide box - so the height can vary per slide

<ion-view>

    <ion-header-bar>
        <h1 class="title">Day Summary</h1>
    </ion-header-bar>

    <ion-content>

        <ion-slide-box show-pager="false" active-slide="activeSlide">

            <ion-slide ng-repeat="daySummary in daySummaries">

                <!--sub header within slide box-->
                
                <div class="my-slide-box-sub-header">
                    <h2>{{daySummary.dayLabel}}</h2>
                </div>                    
                
                <!--time entries list-->

                <div class="time-entries list">
                    <a class="item" ng-repeat="daySummary in daySummary.timeEntries" href="#">
                        <div>{{daySummary.timeLabel}}</div>
                        <div>{{daySummary.activityLabel}}</div>
                    </a>
                </div>

            </ion-slide>

        </ion-slide-box>

    </ion-content>
</ion-view>
2

Give the ion-content tag a attribute called hasheader=“true”

OR put the header bar outside ion view !

3

Hi vir474

Thanks for your reply.

I thought the ‘hasheader’ attribute was depreciated and also I am sure by putting the header outside of the ion-view it moves it out of the slide-box.
But I will fiddle around with both ideas and see if it works.

Thanks
Chris