From 03989a5af071d110b4d1e406a70089f679796229 Mon Sep 17 00:00:00 2001
From: Aditya Bist <adbist@microsoft.com>
Date: Thu, 3 May 2018 21:39:22 -0700
Subject: [PATCH] Fix scrolling in Jobs view page (#1346)

* resize when window resized

* fix scrolling issues
---
 .../parts/jobManagement/common/media/jobs.css  |  2 +-
 .../jobManagement/views/jobsView.component.ts  | 18 ++++++++++++++----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/sql/parts/jobManagement/common/media/jobs.css b/src/sql/parts/jobManagement/common/media/jobs.css
index 0b65b1c82c..6e404f0dd5 100644
--- a/src/sql/parts/jobManagement/common/media/jobs.css
+++ b/src/sql/parts/jobManagement/common/media/jobs.css
@@ -32,7 +32,7 @@ jobhistory-component {
 }
 
 #jobsDiv .jobview-grid {
-    height: 96%;
+    height: 94.7%;
 	width : 100%;
     display: block;
 }
diff --git a/src/sql/parts/jobManagement/views/jobsView.component.ts b/src/sql/parts/jobManagement/views/jobsView.component.ts
index 26a9a44e9a..66930ea6f2 100644
--- a/src/sql/parts/jobManagement/views/jobsView.component.ts
+++ b/src/sql/parts/jobManagement/views/jobsView.component.ts
@@ -74,6 +74,7 @@ export class JobsViewComponent implements AfterContentChecked {
 	private _serverName: string;
 	private _isCloud: boolean;
 	private _showProgressWheel: boolean;
+	private _tabHeight: number;
 
 	constructor(
 		@Inject(BOOTSTRAP_SERVICE_ID) private bootstrapService: IBootstrapService,
@@ -202,9 +203,8 @@ export class JobsViewComponent implements AfterContentChecked {
 		this.dataView.beginUpdate();
 		this.dataView.setItems(jobViews);
 		this.dataView.endUpdate();
-
-		this._table.resizeCanvas();
 		this._table.autosizeColumns();
+		this._table.resizeCanvas();
 		let expandedJobs = this._agentViewComponent.expanded;
 		let expansions = 0;
 		for (let i = 0; i < jobs.length; i++){
@@ -226,8 +226,18 @@ export class JobsViewComponent implements AfterContentChecked {
 		});
 		this._showProgressWheel = false;
 		this._cd.detectChanges();
-		$(window).resize(() => {
-			this._table.resizeCanvas();
+		const self = this;
+		this._tabHeight = $('agentview-component #jobsDiv .jobview-grid').get(0).clientHeight;
+		$(window).resize((e) => {
+			let currentTabHeight = $('agentview-component #jobsDiv .jobview-grid').get(0).clientHeight;
+			if (currentTabHeight < self._tabHeight) {
+				$('agentview-component #jobsDiv div.ui-widget').css('height', `${currentTabHeight-22}px`);
+				self._table.resizeCanvas();
+			} else {
+				$('agentview-component #jobsDiv div.ui-widget').css('height', `${currentTabHeight}px`);
+				self._table.resizeCanvas();
+			}
+			self._tabHeight = currentTabHeight;
 		});
 		this.loadJobHistories();
 	}