From bff4e120a7dfb6d5e1a76258360a31d5764ff818 Mon Sep 17 00:00:00 2001
From: Henry <akhenry@gmail.com>
Date: Tue, 4 Oct 2016 18:23:13 -0700
Subject: [PATCH] [Tables] Modified selection of scrollable element. Fixes
 #1216

---
 .../src/controllers/MCTTableController.js     | 16 ++++++-------
 .../controllers/MCTTableControllerSpec.js     | 23 ++++++++-----------
 2 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/platform/features/table/src/controllers/MCTTableController.js b/platform/features/table/src/controllers/MCTTableController.js
index bf5ea9218c2..d78140f67e3 100644
--- a/platform/features/table/src/controllers/MCTTableController.js
+++ b/platform/features/table/src/controllers/MCTTableController.js
@@ -1,7 +1,7 @@
 
 define(
-    [],
-    function () {
+    ['zepto'],
+    function ($) {
 
         /**
          * A controller for the MCTTable directive. Populates scope with
@@ -16,13 +16,13 @@ define(
             var self = this;
 
             this.$scope = $scope;
-            this.element = element;
+            this.element = $(element[0]);
             this.$timeout = $timeout;
             this.maxDisplayRows = 50;
 
-            this.scrollable = element.find('div');
-            this.thead = element.find('thead');
-            this.tbody = element.find('tbody');
+            this.scrollable = this.element.find('.l-view-section.scrolling').first();
+            this.resultsHeader = this.element.find('.mct-table>thead').first();
+            this.sizingTableBody = this.element.find('.sizing-table>tbody').first();
             this.$scope.sizingRow = {};
 
             this.scrollable.on('scroll', this.onScroll.bind(this));
@@ -261,8 +261,8 @@ define(
          * for individual rows.
          */
         MCTTableController.prototype.setElementSizes = function () {
-            var thead = this.thead,
-                tbody = this.tbody,
+            var thead = this.resultsHeader,
+                tbody = this.sizingTableBody,
                 firstRow = tbody.find('tr'),
                 column = firstRow.find('td'),
                 headerHeight = thead.prop('offsetHeight'),
diff --git a/platform/features/table/test/controllers/MCTTableControllerSpec.js b/platform/features/table/test/controllers/MCTTableControllerSpec.js
index 94ce7c71c2d..285403423fb 100644
--- a/platform/features/table/test/controllers/MCTTableControllerSpec.js
+++ b/platform/features/table/test/controllers/MCTTableControllerSpec.js
@@ -22,9 +22,16 @@
 
 define(
     [
+        "zepto",
         "../../src/controllers/MCTTableController"
     ],
-    function (MCTTableController) {
+    function ($, MCTTableController) {
+
+        var MOCK_ELEMENT_TEMPLATE =
+            '<div><div class="l-view-section scrolling">' +
+                '<table class="sizing-table"><tbody></tbody></table>' +
+                '<table class="mct-table"><thead></thead></table>' +
+            '</div></div>';
 
         describe('The MCTTable Controller', function () {
 
@@ -55,19 +62,7 @@ define(
                     watches[event] = callback;
                 });
 
-                mockElement = jasmine.createSpyObj('element', [
-                    'find',
-                    'prop',
-                    'on'
-                ]);
-                mockElement.find.andReturn(mockElement);
-                mockElement.prop.andReturn(0);
-                mockElement[0] = {
-                    scrollTop: 0,
-                    scrollHeight: 500,
-                    offsetHeight: 1000
-                };
-
+                mockElement = $(MOCK_ELEMENT_TEMPLATE);
                 mockExportService = jasmine.createSpyObj('exportService', [
                     'exportCSV'
                 ]);