Can we design


Is there any way to design like above ?

for example, suppose there is 4 views in single page
means 4 content (each one contains peoples/friends list) in single page where each content can be pull down to refresh and infinite scroll and header/footer should be fixed or freez means while swaping just views of list will be change but header will be as it is

i have tried so many time to find example like above. so many android and ios native apps are providing these kind of layouts but i couldn’t find any demo for this in our cordova with ionic. ?

is there any way or any demo available for it ?

Thank You.


I’d say you have to go for the slide-box:

The header and footer functionality is inlcuded in ionic, and can surely be used in combination with the slide-box. I have no example at the moment, but it should be fairly easy to implement really :smile:

Even if your body code looks like this:

<div class="bar bar-header bar-light">
  <h1 class="title">bar-light</h1>
<ion-slide-box on-slide-changed="slideHasChanged($index)">
    <div class="box blue"><h1>BLUE</h1></div>
    <div class="box yellow"><h1>YELLOW</h1></div>
    <div class="box pink"><h1>PINK</h1></div>
<div class="bar bar-footer bar-balanced">
  <div class="title">Footer</div>

It should be pretty close to what you want :slight_smile:


Thank you iwantwin,

I have used slidebox, but the problem which i got is that

there is single scroll for all of its content and second problem is that
suppose there is 20 element is list view 1 and only 10 element in list view 2
then list view 2 is scrolling as same height as for list view 1 means list view 2 treat as list view 1 for scrolling and pull to refresh.

what i am looking for is that … 4 different scroll ( for pull to refresh and infinite scroll ) for each view.


Did you try explicitly setting the scroll height for each scroll ?

<ion-scroll direction="y" ng-style={'height':count+'px'}>

Where count is a variable created in your controller .


Thanks DigitallQ

but its not working, it sets height of single scroll for all view ( total 4 views ), so problem is same if 1st view has 20 element in list and 1st view has 10 element in list then both view have same size event if we set it to fix size.

am i doing right ? or can you tell me what to do if i didn’t get you?


Is there any other demo or forum topic related to my problem ?


Hi @jay,

Did you try following structure?

<ion-content class="has-header" padding="false" id="home-inside-content-bg" has-bouncing="false" scroll="false" overflow-scroll="false"><ion-scroll direction="y" class="slideContent" side="right">
            <ion-refresher on-refresh="doRefresh()" pulling-icon="ion-arrow-down-c" pulling-text="Pull to refresh..." refreshing-text="Refreshing!" refreshing-icon="ion-loading-c"></ion-refresher>
            <ion-slide-box active-slide="currentSlide" show-pager="false" on-slide-changed="slideChanged(index);">
                <ion-slide prevent-drag ng-repeat="template in templates">
                    <div class="slideContent" id="aboutph_content" ng-bind-html="template.html"></div>
<ion-infinite-scroll  ng-if="moreDataCanBeLoaded()"  icon="ion-loading-c"   on-infinite="loadMoreData()"></ion-infinite-scroll>

Give height using jquery from controller-

var ionContentHeight = parseInt($(’#home-inside-content-bg’).height());
        $scope.currentSlide = $ionicSlideBoxDelegate.currentIndex();
        $(’#home-inside-content-bg .slider-slide[data-index=’ + $scope.currentSlide + ‘] div.slideContent’).css(‘height’, parseInt(ionContentHeight) + ‘px’);

May be it will help you…


Hi Jay,

Sorry for checking in your response late.

I just reviewed Sashikant’s solution. It is expected to work fine.

Also, you can also test creating a custom directive to check when all the list-items added to the scroll and then find the height to apply.

Let me know if it worked.

Sorry again for replying late.


hello @iwantwin , @DigitalIQ , @shashikant

Thanks for your response.

Now its working thanks @shashikant for your code :smile:

i would like to share my code for this is like…

        $scope.currentSlide = $ionicSlideBoxDelegate.currentIndex();
        $(’#content_page .slider-slide’).css(‘height’,‘auto’);
        var ionContentHeight = $(’#content_page .slider-slide[data-index=’ + $scope.currentSlide + ‘]’).height();
        $(’#content_page .slider-slide’).css(‘height’,ionContentHeight);

and i am calling this function at several time when needed like at the time of slide change, at the time of content add or remove (by pull-down or infinite scroll) etc.

Thank you.