From 870ff395277c4ba29e2b0a33e54cf0a26ae95651 Mon Sep 17 00:00:00 2001
From: Leila Lali <llali@microsoft.com>
Date: Thu, 19 Nov 2020 09:19:39 -0800
Subject: [PATCH] Fixed the issue with adding and removing flex container
 (#13480)

---
 .../src/views/widgets/dashboardWidget.ts               | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/extensions/machine-learning/src/views/widgets/dashboardWidget.ts b/extensions/machine-learning/src/views/widgets/dashboardWidget.ts
index 03cf9ea2bc..93c972ed67 100644
--- a/extensions/machine-learning/src/views/widgets/dashboardWidget.ts
+++ b/extensions/machine-learning/src/views/widgets/dashboardWidget.ts
@@ -229,6 +229,7 @@ export class DashboardWidget {
 			iconHeight: '10px',
 			iconWidth: '10px'
 		}).component();
+
 		showMoreComponent.onDidClick(() => {
 			let showMore = showMoreComponent.label === constants.showMoreTitle;
 			if (showMore) {
@@ -237,12 +238,10 @@ export class DashboardWidget {
 					dark: this.asAbsolutePath('images/dark/showLess_inverse.svg'),
 					light: this.asAbsolutePath('images/light/showLess.svg'),
 				};
-				parentPanel.addItem(morePanel, {
-					CSSStyles: morePanelStyle
-				});
+				morePanel.updateCssStyles(Object.assign({}, morePanelStyle, { 'visibility': 'visible' }));
 			} else {
 				showMoreComponent.label = constants.showMoreTitle;
-				parentPanel.removeItem(morePanel);
+				morePanel.updateCssStyles(Object.assign({}, morePanelStyle, { 'visibility': 'hidden' }));
 				image.iconPath = {
 					dark: this.asAbsolutePath('images/dark/showMore_inverse.svg'),
 					light: this.asAbsolutePath('images/light/showMore.svg'),
@@ -267,6 +266,9 @@ export class DashboardWidget {
 		parentPanel.addItem(linkContainer, {
 			CSSStyles: {}
 		});
+		parentPanel.addItem(morePanel, {
+			CSSStyles: (Object.assign({}, morePanelStyle, { 'visibility': 'hidden' }))
+		});
 
 		return showMoreComponent;
 	}