Merge pull request #1498 from opf/fix/wp-table-scrolling-in-split-view

Fix horizontal table scrolling within split view

app/assets/javascripts/angular/work_packages/column-context-menu.js

@@ -36,7 +36,7 @@ angular.module('openproject.workPackages')
     controller: 'ColumnContextMenuController',
     controllerAs: 'contextMenu',
     templateUrl: '/templates/work_packages/column_context_menu.html',
-    container: '.work-packages--list'
+    container: '.work-packages--list-scroll-area'
   });
 }])
 

app/assets/stylesheets/content/_work_packages.sass

@@ -35,6 +35,10 @@
 .work-packages--list
   @extend %panel
 
+.work-packages--list-scroll-area
+  overflow-x: scroll
+  position: relative
+
 .work-packages--details
   @extend %panel
   padding: 0 1em 1em

app/assets/stylesheets/layout/_split_view.sass

@@ -23,6 +23,7 @@
   width: 100%
   clear: both
   display: table
+  table-layout: fixed
 
 .split-view %panel
   display: table-cell

public/templates/work_packages.list.html

@@ -105,31 +105,31 @@
 <back-url></back-url>
 
 
-<div class="work-packages--split-view autoscroll">
+<div class="work-packages--split-view">
   <div class="work-packages--list">
-    <work-packages-table ng-if="rows && columns"
-                         project-identifier="projectIdentifier"
-                         columns="columns"
-                         rows="rows"
-                         query="query"
-                         group-by="query.groupBy"
-                         group-by-column="groupByColumn"
-                         count-by-group="workPackageCountByGroup"
-                         display-sums="query.displaySums"
-                         total-sums="totalSums"
-                         group-sums="groupSums"
-                         update-results="updateResults()"
-                         with-loading="withLoading"
-                         update-back-url="updateBackUrl">
-    </work-packages-table>
-
-    <table-pagination total-entries="totalEntries"
-                      update-results="updateResults()">
-    </table-pagination>
+    <div class="work-packages--list-scroll-area">
+      <work-packages-table ng-if="rows && columns"
+                           project-identifier="projectIdentifier"
+                           columns="columns"
+                           rows="rows"
+                           query="query"
+                           group-by="query.groupBy"
+                           group-by-column="groupByColumn"
+                           count-by-group="workPackageCountByGroup"
+                           display-sums="query.displaySums"
+                           total-sums="totalSums"
+                           group-sums="groupSums"
+                           update-results="updateResults()"
+                           with-loading="withLoading"
+                           update-back-url="updateBackUrl">
+      </work-packages-table>
 
+      <table-pagination total-entries="totalEntries"
+                        update-results="updateResults()">
+      </table-pagination>
+    </div>
     <modal-loading>
     </modal-loading>
-
   </div>
   <div class="work-packages--details" ui-view
     feature-flag="detailsView"></div>