Fix header on grid layout


#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.