How to get scroll bar to appear and work?

ionic-v1
1

Just beginning with ionic , I can’t make a scrollbar for a simple list ?

I am working in Chrome and wan’t to be able to scroll thought simple lists of items
using the scroll bar.

Here is a codepen: http://codepen.io/kolodni/pen/zvOoRy

I also put the code here

<html ng-app="ionicApp">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    
    <title>Sign-in, Then Tabs Example</title>

    <link href="http://code.ionicframework.com/0.9.24/css/ionic.min.css" rel="stylesheet">
    <script src="http://code.ionicframework.com/0.9.24/js/ionic.bundle.min.js"></script>
  </head>

  <body ng-controller="EduCtrl" scroll="true">
    
    <tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive">
      <tab title="Scroll" icon="ion-home">
        <!-- <nav-view name="edu-tab"></nav-view> -->
        <ion-content  scroll="true" direction="y" scrollbar-y="true">
          <ion-list>
             <ion-item ng-repeat="edu in edus">
                <div class="item item-divider">
                <span>Institute</span>
                  {{edu.institute}}
                </div>
                <div class="item">
                  <span>Subject</span>
                  {{edu.subject}}
                </div>
                <div class="item">
                  <span>From</span>
                  {{edu.fromYear}}
                </div>
                <div class="item">
                  <span>To</span>
                  {{edu.toYear}}
                </div>
              </ion-item>
           </ion-list>
        </ion-content>
      </tab>
      <tab title="About" icon="ion-ios7-information" >
        about tab
      </tab>
    </tabs>

  </body>
</html>
angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {
})

.controller('EduCtrl', function($scope, $state) {
  //alert('in EduCtrl');
  $scope.edus = [
      {institute: 'MIT', subject:'a', fromYear: 1993, toYear: 1999},
      {institute: 'UCLM', subject:'b', fromYear: 2000, toYear: 2002},
      {institute: 'Cambridge', subject:'c', fromYear: 2000, toYear: 2002},
      {institute: 'NY', subject:'d', fromYear: 2000, toYear: 2002},
      {institute: 'Orange', subject:'e', fromYear: 2000, toYear: 2002},
      {institute: 'Orange', subject:'e', fromYear: 2000, toYear: 2002},
      {institute: 'Orange', subject:'e', fromYear: 2000, toYear: 2002},
      {institute: 'Orange', subject:'e', fromYear: 2000, toYear: 2002},
      {institute: 'Orange', subject:'e', fromYear: 2000, toYear: 2002},
      {institute: 'Banana', subject:'f', fromYear: 2004, toYear: 2011}
  ];
  
})

;

thanks.

2

That Codepen is using an extremely old version of Ionic. I’d suggest upgrading to the latest version (1.1.0) and then using ion-tabs. You also need to have ion-content wrapped in an ion-view. Here is a fixed Codepen: http://codepen.io/brandyshea/pen/ZbzKGa?editors=101

I would also suggest separating the tabs into states. You can see an example of this here: http://codepen.io/ionic/pen/odqCz

And for more information on tabs, there is a good blog here: https://blog.nraboy.com/2014/12/understanding-tabs-ionic-framework/

You can use ionic start myApp tabs from the command line to create an Ionic app based on the tabs starter. Let me know if you have any questions. :smile: