From 947960712261f274f081fcfb758b3a5b17a5d7b6 Mon Sep 17 00:00:00 2001
From: Jens Ulferts <j.ulferts@finn.de>
Date: Fri, 21 Aug 2015 16:08:48 +0200
Subject: [PATCH] specify interactive-table to be used on table tag only

It was formerly used on the container elements as well which looked to be ok on first glance but failed to calculate the
table width correctly.
---
 app/assets/stylesheets/content/_table.lsg      |  4 ++--
 .../content/_work_packages_table.lsg           |  4 ++--
 .../work_packages/work_packages_table.html     |  5 ++---
 .../interactive-table-directive.js             | 18 +++++++++++++-----
 4 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/app/assets/stylesheets/content/_table.lsg b/app/assets/stylesheets/content/_table.lsg
index e62f195adb..2912538521 100644
--- a/app/assets/stylesheets/content/_table.lsg
+++ b/app/assets/stylesheets/content/_table.lsg
@@ -4,9 +4,9 @@
 [WP tables](http://localhost:8080/assets/css/styleguide.html#with-work-packages)
 
 ```
-<div class="generic-table--container" interactive-table>
+<div class="generic-table--container">
   <div class="generic-table--results-container" style="max-height: 340px;">
-    <table role="grid" class="generic-table">
+    <table role="grid" class="generic-table" interactive-table>
       <colgroup>
         <col highlight-col>
         <col highlight-col>
diff --git a/app/assets/stylesheets/content/_work_packages_table.lsg b/app/assets/stylesheets/content/_work_packages_table.lsg
index 246efad2ee..6f2f2c9846 100644
--- a/app/assets/stylesheets/content/_work_packages_table.lsg
+++ b/app/assets/stylesheets/content/_work_packages_table.lsg
@@ -3,9 +3,9 @@
 ## with work packages
 
 ```
-<div class="generic-table--container work-package-table--container" interactive-table>
+<div class="generic-table--container work-package-table--container">
   <div class="generic-table--results-container">
-    <table class="generic-table">
+    <table class="generic-table" interactive-table>
       <colgroup>
         <col highlight-col>
         <col highlight-col>
diff --git a/frontend/app/templates/work_packages/work_packages_table.html b/frontend/app/templates/work_packages/work_packages_table.html
index 0f1e1b73f4..a326f57c2e 100644
--- a/frontend/app/templates/work_packages/work_packages_table.html
+++ b/frontend/app/templates/work_packages/work_packages_table.html
@@ -1,8 +1,7 @@
 <div class="generic-table--container work-package-table--container"
-  ng-class="{ '-with-footer': displaySums }"
-  interactive-table>
+  ng-class="{ '-with-footer': displaySums }">
   <div class="generic-table--results-container" ng-if="rows.length">
-    <table class="keyboard-accessible-list generic-table">
+    <table interactive-table class="keyboard-accessible-list generic-table">
       <colgroup>
         <col highlight-col />
         <col highlight-col ng-repeat="column in columns" />
diff --git a/frontend/app/ui_components/interactive-table-directive.js b/frontend/app/ui_components/interactive-table-directive.js
index 9f5a9fc236..292e55f4ef 100644
--- a/frontend/app/ui_components/interactive-table-directive.js
+++ b/frontend/app/ui_components/interactive-table-directive.js
@@ -31,17 +31,25 @@ module.exports = function($timeout, $window){
     restrict: 'A',
 
     link: function(scope, element) {
+      if (getTable().filter('table').length === 0) {
+        throw 'interactive-table needs to be defined on a \'table\' tag';
+      }
+
       function getTable() {
-        return element.find('table');
+        return element;
       }
 
       function getInnerContainer() {
-        return element.find('.generic-table--results-container');
+        return element.parent('.generic-table--results-container');
+      }
+
+      function getOuterContainer() {
+        return element.parent('.generic-table--container');
       }
 
       function getBackgrounds() {
-        return element.find('.generic-table--header-background,' +
-                            '.generic-table--footer-background');
+        return getInnerContainer().find('.generic-table--header-background,' +
+                                        '.generic-table--footer-background');
       }
 
       function getHeadersFooters() {
@@ -61,7 +69,7 @@ module.exports = function($timeout, $window){
         if (tableWidth > document.documentElement.clientWidth - scrollBarWidth) {
           tableWidth += scrollBarWidth;
         }
-        if (tableWidth > element.width()) {
+        if (tableWidth > getOuterContainer().width()) {
           // force containers to the width of the table
           getInnerContainer().width(tableWidth);
           getBackgrounds().width(tableWidth);