List class cant be scrolled

Hi All,

Please kindly help me on this problem :

Note : The end goal is to create a sticky header & footer, with scroll able list between them

Im creating a page with static header & footer, and with scrollable list between them.

The list is scrollable in the browser (ionic serve) but not working in android device

This is the index:

  <body ng-app="app">
        <div class="bar bar-header" id="img_header_container">
          <img class="title" id="img_header" src="img/icon.png"/>

    <div class="bar bar-footer">
      <div class="title"><p id="footer">No copyrights intended. Copyrights belong to their respective owners</p></div>

And this is the js :

var app = angular.module('app', ['ionic'])
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
    if(window.StatusBar) {

And this is the content :

            <ul class="list">
               <li class="item">

What should i do to make the ul scrollable on the android device?

Thanks a lot for your help


I tried to use native scrolling :

.config(function($ionicConfigProvider) {
  if (!ionic.Platform.isIOS()) {
    alert('not iOS');

But still, its not working

Thanks a lot for all help.

Im sorry the root problem is not the un-scrollable list, but a header that somehow push all of elements below it. Hence, my scroll stucks and looks like can not be scrolled