From fb85e286d3c267a37ff708f371425deeb1bc1b59 Mon Sep 17 00:00:00 2001
From: Joao Moreno <joao.moreno@microsoft.com>
Date: Wed, 4 Sep 2019 17:51:45 +0200
Subject: [PATCH] layout splitview views with absolute positioning

related to #78167
---
 .../base/browser/ui/splitview/splitview.css   | 15 +++-----------
 src/vs/base/browser/ui/splitview/splitview.ts | 20 +++++++++++++------
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/vs/base/browser/ui/splitview/splitview.css b/src/vs/base/browser/ui/splitview/splitview.css
index 6fb8f1c61d0e3..75e686cb5fcfc 100644
--- a/src/vs/base/browser/ui/splitview/splitview.css
+++ b/src/vs/base/browser/ui/splitview/splitview.css
@@ -21,24 +21,15 @@
 }
 
 .monaco-split-view2 > .split-view-container {
-	display: flex;
 	width: 100%;
 	height: 100%;
 	white-space: nowrap;
-}
-
-.monaco-split-view2.vertical > .split-view-container {
-	flex-direction: column;
-}
-
-.monaco-split-view2.horizontal > .split-view-container {
-	flex-direction: row;
+	position: relative;
 }
 
 .monaco-split-view2 > .split-view-container > .split-view-view {
 	white-space: initial;
-	flex: none;
-	position: relative;
+	position: absolute;
 }
 
 .monaco-split-view2 > .split-view-container > .split-view-view:not(.visible) {
@@ -72,4 +63,4 @@
 .monaco-split-view2.separator-border.vertical > .split-view-container > .split-view-view:not(:first-child)::before {
 	height: 1px;
 	width: 100%;
-}
\ No newline at end of file
+}
diff --git a/src/vs/base/browser/ui/splitview/splitview.ts b/src/vs/base/browser/ui/splitview/splitview.ts
index 5e5e54dcf6172..d89028622d34d 100644
--- a/src/vs/base/browser/ui/splitview/splitview.ts
+++ b/src/vs/base/browser/ui/splitview/splitview.ts
@@ -125,10 +125,13 @@ abstract class ViewItem {
 		}
 	}
 
-	layout(orthogonalSize: number | undefined): void {
+	layout(position: number, orthogonalSize: number | undefined): void {
+		this.layoutContainer(position);
 		this.view.layout(this.size, orthogonalSize);
 	}
 
+	abstract layoutContainer(position: number): void;
+
 	dispose(): IView {
 		this.disposable.dispose();
 		return this.view;
@@ -137,16 +140,16 @@ abstract class ViewItem {
 
 class VerticalViewItem extends ViewItem {
 
-	layout(orthogonalSize: number | undefined): void {
-		super.layout(orthogonalSize);
+	layoutContainer(position: number): void {
+		this.container.style.top = `${position}px`;
 		this.container.style.height = `${this.size}px`;
 	}
 }
 
 class HorizontalViewItem extends ViewItem {
 
-	layout(orthogonalSize: number | undefined): void {
-		super.layout(orthogonalSize);
+	layoutContainer(position: number): void {
+		this.container.style.left = `${position}px`;
 		this.container.style.width = `${this.size}px`;
 	}
 }
@@ -846,7 +849,12 @@ export class SplitView extends Disposable {
 		this.contentSize = this.viewItems.reduce((r, i) => r + i.size, 0);
 
 		// Layout views
-		this.viewItems.forEach(item => item.layout(this.orthogonalSize));
+		let position = 0;
+
+		for (const viewItem of this.viewItems) {
+			viewItem.layout(position, this.orthogonalSize);
+			position += viewItem.size;
+		}
 
 		// Layout sashes
 		this.sashItems.forEach(item => item.sash.layout());