Fix header on grid layout

ionic-v1
1

I want to fix the header of my grid on ionic for iPad app. I don’t want to scroll the header.
I would be grateful for some quick solution.
Please help.

2

Ion-header shouldn’t be scrolling. Can you post an example of what you have?

3

Header and sub-header are already there in my app. But I want to fix content on list as header of table.

Here in this image I want to fix Header (Value / Cost…)

4

Hey you can try ion-scroll for that.

But your table head on top of your ion-content.
Then add a ion-scroll container with y-scrolling.

http://ionicframework.com/docs/api/directive/ionScroll/

Greetz, bengtler

5

Thanks for the quick solution. Using ion-content and ion-scroll, I get the header fixed but introducing one new problem of scrolling. Now when I am scrolling the items(data) towards the bottom of the list,its automatically scroll up (bouncing back to the top item) and I am not able to view my items(data) at bottom.
I think,there must be some solution for this issue but I could not get it. Please help.

6

Please check above issue on plnkr. I have listed items Cowbell1 to Cowbell22. You can not scroll to bottom of the list and can’t view the last item Cowbell22.

7

Your domstructure is wrong.

Take a look here how to structure an app with navbar
http://ionicframework.com/docs/api/directive/ionNavBar/

<ion-view>
  <ion-header-bar>
    // your headerbar stuff
  </ion-header-bar>
  <ion-content>
  </ion-content>
</ion-view>
8

Yes this is fine. But doing this change, my issue is not resolved. My issue is regarding scrolling the items inside ion-content. And as I have posted before, header and sub-header are already there in my app as displayed on above image. Now I have put table header on top of the ion-content and list data inside ion-scroll and get the scrolling issue as posted on plnkr.

9

Has anyone found the solution of my problem? I need this urgently. Please help!!!

10

I solved it by adding on-scroll="scroll()" and delegate-handle="scrollItem" to my ion-content (or your scroll view)

the scroll function inside the controller uses jquery:

$scope.scroll = function (){
$("#schueler_overview_header").css("-webkit-transform" ,"translate3d(0px, "+$ionicScrollDelegate.$getByHandle('scrollItem').getScrollPosition().top +"px, 0px)");
$("#schueler_overview_header").css("transform" ,"translate3d(0px, "+$ionicScrollDelegate.$getByHandle('scrollItem').getScrollPosition().top+"px, 0px)");

};

where #schueler_overview_header is the sticky element.

Hope that helps you, though it is a bit dirty.