I've setup a series of tabs with ion-views for content. The content is displayed properly in each tabbed route, but the tabbed content doesn't scroll vertically and the list runs off the page making it inaccessible. Are tabs not supposed to be scrolled? The docs indicate scrolling is supposed to be turned on by default for ion-content.
INDEX
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<!-- Application Styles -->
<link href="css/ionic.app.css" rel="stylesheet">
<!-- Ionic Angular Scripts -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/angular/angular-resource.js"></script>
<!-- Cordova Scripts -->
<script src="cordova.js"></script>
<!-- Application Scripts -->
<script src="js/app.js"></script>
<script src="js/app-configuration.js"></script>
<script src="js/app-interceptor.js"></script>
<script src="js/app-route.js"></script>
<script src="js/app-route-controller.js"></script>
<script src="js/app-resource.js"></script>
<script src="js/app-service.js"></script>
</head>
<body ng-app="eventApp">
<ion-nav-view></ion-nav-view>
</body>
</html>
DASHBOARD VIEW - /dashboard
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-light">
<ion-nav-back-button class="button-clear">
<i class="ion-chevron-left"></i> Back
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-light"></ion-header-bar>
<ion-content>
<ion-list class="list">
<ion-item href="#" ui-sref="dashboard.index" class="item-icon-left" menu-close>
<i class="icon ion-map"></i> Map
</ion-item>
<ion-item href="#" ui-sref="dashboard.profile.index" class="item-icon-left" menu-close>
<i class="icon ion-android-person"></i> User Profile
</ion-item>
<ion-item href="#" ui-sref="dashboard.event.index" class="item-icon-left" menu-close>
<i class="icon ion-android-calendar"></i> Events
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
TABS INNER VIEW - /dashboard/event/list
<ion-view view-title="" id="pk-event" hide-back-button="true">
<ion-tabs class="tabs-positive">
<ion-tab title="Current" ui-sref="dashboard.event.index">
<ion-nav-view name="current-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Upcoming" ui-sref="dashboard.event.upcoming">
<ion-nav-view name="upcoming-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Past" ui-sref="dashboard.event.past">
<ion-nav-view name="past-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-view>
TAB CHILD VIEW - /dashboard/event/list/current
<ion-view title="">
<ion-content>
<ion-list show-delete="showDelete"
show-reorder="showReorder"
can-swipe="canSwipe">
<div class="item item-divider">
Current Events
</div>
<div ng-repeat="event in events">
<div>Date: {{event.dates[0] | date}}</div>
<br>
<h2>{{event.name}}</h2>
<p>Event Address: {{event.address}}</p>
<p>{{event.note}}</p>
</ion-item>
</div>
</ion-list>
</ion-content>
</ion-view>
Pretty sure the parent should be in your index.html file and should have a
<ion-nav-view>
</ion-nav-view>
<ion-tabs>
</ion-tabs>
Then your
<ion-view>
<ion-content>
</ion-content>
<ion-view>
Will fill the ion-nav-view when you route to a state and your tabs will remain under the view and not scroll while the content in the view will. You could also place your tabs under your ion-content within the ion-view, however you would need to place them in each state if you took this approach and have to duplicate logic for routing. Here is a example where i have used a ion-view that holds a slide box which one slide holds ion-content with tabs. Here is the code from a example I wiped up.
HTML:
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Side Menus</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-nav-view></ion-nav-view>
<ion-tabs class="tabs-positive tabs-icon-only">
<ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
<!-- Tab 1 content -->
</ion-tab>
<ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
<!-- Tab 2 content -->
</ion-tab>
<ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
<!-- Tab 3 content -->
</ion-tab>
</ion-tabs>
<script id="templates/event-menu.html" type="text/ng-template">
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-assertive">
<h1 class="title">Left Menu</h1>
</ion-header-bar>
<ion-content>
<ul class="list">
<!-- Note each link has the 'menu-close' attribute so the menu auto closes when clicking on one of these links -->
<a href="#/event/check-in" class="item" menu-close>Check-in</a>
<a href="#/event/attendees" class="item" menu-close>Attendees</a>
</ul>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Welcome">
<ion-content class="padding">
<p>Swipe to the right to reveal the left menu.</p>
<p>(On desktop click and drag from left to right)</p>
</ion-content>
</ion-view>
</script>
<script id="templates/check-in.html" type="text/ng-template">
<ion-view view-title="Event Check-in">
<ion-content>
<form class="list" ng-show="showForm">
<div class="item item-divider">
Attendee Info
</div>
<label class="item item-input">
<input type="text" placeholder="First Name" ng-model="attendee.firstname">
</label>
<label class="item item-input">
<input type="text" placeholder="Last Name" ng-model="attendee.lastname">
</label>
<div class="item item-divider">
Shirt Size
</div>
<ion-radio ng-repeat="shirtSize in shirtSizes"
ng-value="shirtSize.value"
ng-model="attendee.shirtSize">
{{ shirtSize.text }}
</ion-radio>
<div class="item item-divider">
Lunch
</div>
<ion-toggle ng-model="attendee.vegetarian">
Vegetarian
</ion-toggle>
<div class="padding">
<button class="button button-block" ng-click="submit()">Checkin</button>
</div>
</form>
<div ng-hide="showForm">
<pre ng-bind="attendee | json"></pre>
<a href="#/event/attendees">View attendees</a>
</div>
</ion-content>
</ion-view>
</script>
<script id="templates/attendees.html" type="text/ng-template">
<ion-view view-title="Event Attendees">
<ion-content>
<div class="list">
<ion-toggle ng-repeat="attendee in attendees | orderBy:'firstname' | orderBy:'lastname'"
ng-model="attendee.arrived"
ng-change="arrivedChange(attendee)">
{{ attendee.firstname }}
{{ attendee.lastname }}
</ion-toggle>
<div class="item item-divider">
Activity
</div>
<div class="item" ng-repeat="msg in activity">
{{ msg }}
</div>
</div>
</ion-content>
</ion-view>
</script>
</body>
</html>
JS:
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('eventmenu', {
url: "/event",
abstract: true,
templateUrl: "templates/event-menu.html"
})
.state('eventmenu.home', {
url: "/home",
views: {
'menuContent' :{
templateUrl: "templates/home.html"
}
}
})
.state('eventmenu.checkin', {
url: "/check-in",
views: {
'menuContent' :{
templateUrl: "templates/check-in.html",
controller: "CheckinCtrl"
}
}
})
.state('eventmenu.attendees', {
url: "/attendees",
views: {
'menuContent' :{
templateUrl: "templates/attendees.html",
controller: "AttendeesCtrl"
}
}
})
$urlRouterProvider.otherwise("/event/home");
})
.controller('MainCtrl', function($scope, $ionicSideMenuDelegate) {
$scope.attendees = [
{ firstname: 'Nicolas', lastname: 'Cage' },
{ firstname: 'Jean-Claude', lastname: 'Van Damme' },
{ firstname: 'Keanu', lastname: 'Reeves' },
{ firstname: 'Steven', lastname: 'Seagal' }
];
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
})
.controller('CheckinCtrl', function($scope) {
$scope.showForm = true;
$scope.shirtSizes = [
{ text: 'Large', value: 'L' },
{ text: 'Medium', value: 'M' },
{ text: 'Small', value: 'S' }
];
$scope.attendee = {};
$scope.submit = function() {
if(!$scope.attendee.firstname) {
alert('Info required');
return;
}
$scope.showForm = false;
$scope.attendees.push($scope.attendee);
};
})
.controller('AttendeesCtrl', function($scope) {
$scope.activity = [];
$scope.arrivedChange = function(attendee) {
var msg = attendee.firstname + ' ' + attendee.lastname;
msg += (!attendee.arrived ? ' has arrived, ' : ' just left, ');
msg += new Date().getMilliseconds();
$scope.activity.push(msg);
if($scope.activity.length > 3) {
$scope.activity.splice(0, 1);
}
};
});
1. if you still want to use ion-content, try to increase the height
<ion-content height="500"> //it may be possible to use height="100%"
2.try to use <ion-scroll direction="y"> instead of <ion-content>
TAB CHILD VIEW - /dashboard/event/list/current
<ion-view title="">
<ion-scroll direction="y> <!-- use ion-scroll instead-->
<ion-list show-delete="showDelete"
show-reorder="showReorder"
can-swipe="canSwipe">
<div class="item item-divider">
Current Events
</div>
<div ng-repeat="event in events">
<div>Date: {{event.dates[0] | date}}</div>
<br>
<h2>{{event.name}}</h2>
<p>Event Address: {{event.address}}</p>
<p>{{event.note}}</p>
</ion-item>
</div>
</ion-list>
</ion-scrollion>
</ion-view>