Fixed #179 - overflow scroll not working

ionic-team · Nov 25, 2013 · 8fe6e18 · 8fe6e18
1 parent 8efe1f6
commit 8fe6e18
Show file tree

Hide file tree

Showing 11 changed files with 52 additions and 19 deletions.
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /**
  * Copyright 2013 Drifty Co.
  * http://drifty.com/
@@ -2326,8 +2327,12 @@ body, .ionic-body {
     -webkit-transform: scale(2, 2); } }
 
 .overflow-scroll {
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: scroll;
   -webkit-overflow-scrolling: touch; }
+  .overflow-scroll .scroll {
+    position: static;
+    height: 100%; }
 
 .has-header {
   top: 44px; }

diff --git a/dist/css/themes/ionic-ios7.css b/dist/css/themes/ionic-ios7.css
@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /** 
  * Nav controllers and header bar animations
  */

diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
@@ -24576,7 +24576,7 @@ angular.module('ionic.ui.content', [])
   return {
     restrict: 'E',
     replace: true,
-    template: '<div class="scroll-content"><div class="scroll"></div></div>',
+    template: '<div class="scroll-content"></div>',
     transclude: true,
     scope: {
       onRefresh: '&',
@@ -24618,9 +24618,16 @@ angular.module('ionic.ui.content', [])
 
         // If they want plain overflow scrolling, add that as a class
         if($scope.scroll === "false") {
+          var clone = transclude($scope.$parent);
+          $element.append(clone);
         } else if(attr.overflowScroll === "true") {
           c.addClass('overflow-scroll');
+          var clone = transclude($scope.$parent);
+          $element.append(clone);
         } else {
+          var sc = document.createElement('div');
+          sc.className = 'scroll';
+          $element.append(sc);
           // Otherwise, supercharge this baby!
           var sv = new ionic.views.Scroll({
             el: $element[0].firstElementChild,
@@ -24636,11 +24643,11 @@ angular.module('ionic.ui.content', [])
           });
           // Let child scopes access this 
           $scope.scrollView = sv;
-        }
 
-        // Pass the parent scope down to the child
-        var clone = transclude($scope.$parent);
-        angular.element($element[0].firstElementChild).append(clone);
+          // Pass the parent scope down to the child
+          var clone = transclude($scope.$parent);
+          angular.element($element[0].firstElementChild).append(clone);
+        }
       };
     }
   };
@@ -25779,6 +25786,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
             return;
           }
           sideMenuCtrl._handleDrag(e);
+          e.gesture.srcEvent.preventDefault();
         };
 
         var dragGesture = Gesture.on('drag', dragFn, $element);

diff --git a/dist/js/ionic.js b/dist/js/ionic.js
@@ -743,7 +743,7 @@ window.ionic = {
                       }
 
                       if(this.srcEvent.preventDefault) {
-                        this.srcEvent.preventDefault();
+                        //this.srcEvent.preventDefault();
                       }
                     },
 
@@ -2145,6 +2145,7 @@ window.ionic = {
       // Listen for drag and release events
       ionic.onGesture('drag', function(e) {
         _this._handleDrag(e);
+        e.gesture.srcEvent.preventDefault();
       }, this.el);
       ionic.onGesture('release', function(e) {
         _this._handleEndDrag(e);
@@ -3722,6 +3723,7 @@ window.ionic = {
       // Listen for drag and release events
       window.ionic.onGesture('drag', function(e) {
         _this._handleDrag(e);
+        e.gesture.srcEvent.preventDefault();
       }, this.el);
       window.ionic.onGesture('release', function(e) {
         _this._handleEndDrag(e);
@@ -4612,9 +4614,9 @@ ionic.controllers.NavController = ionic.controllers.ViewController.inherit({
         this._rightShowing = false;
 
         // Push the z-index of the right menu down
-        this.right && this.right.pushDown();
+        this.right && this.right.pushDown && this.right.pushDown();
         // Bring the z-index of the left menu up
-        this.left && this.left.bringUp();
+        this.left && this.left.bringUp && this.left.bringUp();
       } else {
         this._rightShowing = true;
         this._leftShowing = false;

diff --git a/js/ext/angular/src/directive/ionicContent.js b/js/ext/angular/src/directive/ionicContent.js
@@ -22,7 +22,7 @@ angular.module('ionic.ui.content', [])
   return {
     restrict: 'E',
     replace: true,
-    template: '<div class="scroll-content"><div class="scroll"></div></div>',
+    template: '<div class="scroll-content"></div>',
     transclude: true,
     scope: {
       onRefresh: '&',
@@ -64,9 +64,16 @@ angular.module('ionic.ui.content', [])
 
         // If they want plain overflow scrolling, add that as a class
         if($scope.scroll === "false") {
+          var clone = transclude($scope.$parent);
+          $element.append(clone);
         } else if(attr.overflowScroll === "true") {
           c.addClass('overflow-scroll');
+          var clone = transclude($scope.$parent);
+          $element.append(clone);
         } else {
+          var sc = document.createElement('div');
+          sc.className = 'scroll';
+          $element.append(sc);
           // Otherwise, supercharge this baby!
           var sv = new ionic.views.Scroll({
             el: $element[0].firstElementChild,
@@ -82,11 +89,11 @@ angular.module('ionic.ui.content', [])
           });
           // Let child scopes access this 
           $scope.scrollView = sv;
-        }
 
-        // Pass the parent scope down to the child
-        var clone = transclude($scope.$parent);
-        angular.element($element[0].firstElementChild).append(clone);
+          // Pass the parent scope down to the child
+          var clone = transclude($scope.$parent);
+          angular.element($element[0].firstElementChild).append(clone);
+        }
       };
     }
   };

diff --git a/js/ext/angular/src/directive/ionicSideMenu.js b/js/ext/angular/src/directive/ionicSideMenu.js
@@ -68,6 +68,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture'])
             return;
           }
           sideMenuCtrl._handleDrag(e);
+          e.gesture.srcEvent.preventDefault();
         };
 
         var dragGesture = Gesture.on('drag', dragFn, $element);

diff --git a/js/ext/angular/test/sideMenu.html b/js/ext/angular/test/sideMenu.html
@@ -18,15 +18,15 @@
             <button class="button button-icon" ng-click="openLeft()"><i class="icon ion-navicon"></i></button>
             <h1 class="title">Slide me</h1>
           </header>
-          <div class="content has-header">
+          <content has-header="true">
             <h1>Content</h1>
-          </div>
+          </content>
         </pane>
         <side-menu side="left">
           <header class="bar bar-header bar-assertive">
             <h1 class="title">Left</h1>
           </header>
-          <content has-header="true">
+          <content has-header="true" overflow-scroll="true">
             <ul class="list">
               <a href="#" class="item" ng-repeat="item in list">
                 {{item.text}}

diff --git a/js/utils/gestures.js b/js/utils/gestures.js
@@ -441,7 +441,7 @@
                       }
 
                       if(this.srcEvent.preventDefault) {
-                        this.srcEvent.preventDefault();
+                        //this.srcEvent.preventDefault();
                       }
                     },
 

diff --git a/js/views/scrollView.js b/js/views/scrollView.js
@@ -106,6 +106,7 @@
       // Listen for drag and release events
       ionic.onGesture('drag', function(e) {
         _this._handleDrag(e);
+        e.gesture.srcEvent.preventDefault();
       }, this.el);
       ionic.onGesture('release', function(e) {
         _this._handleEndDrag(e);

diff --git a/js/views/slideBoxView.js b/js/views/slideBoxView.js
@@ -30,6 +30,7 @@
       // Listen for drag and release events
       window.ionic.onGesture('drag', function(e) {
         _this._handleDrag(e);
+        e.gesture.srcEvent.preventDefault();
       }, this.el);
       window.ionic.onGesture('release', function(e) {
         _this._handleEndDrag(e);

diff --git a/scss/_scaffolding.scss b/scss/_scaffolding.scss
@@ -155,8 +155,15 @@ body, .ionic-body {
 }
 
 .overflow-scroll {
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
+
+  .scroll {
+    position: static;
+    height: 100%;
+
+  }
 }
 
 // Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.