From 52a642f351132782ac99075fbbb98742b0d7691c Mon Sep 17 00:00:00 2001
From: Alan Ren <alanren@microsoft.com>
Date: Wed, 3 Feb 2021 10:27:12 -0800
Subject: [PATCH] apply css style at the right element (#14144)

* apply css style at the right element

* make mergeCss protected
---
 .../modelComponents/button.component.ts       |  4 +-
 .../modelComponents/checkbox.component.ts     |  8 +++-
 .../browser/modelComponents/componentBase.ts  | 39 +++++++------------
 .../declarativeTable.component.html           |  3 +-
 .../declarativeTable.component.ts             |  7 ++++
 .../modelComponents/diffeditor.component.ts   |  2 +-
 .../modelComponents/dropdown.component.ts     |  8 +++-
 .../fileBrowserTree.component.ts              |  9 ++++-
 .../formContainer.component.ts                | 12 +++++-
 .../groupContainer.component.ts               | 11 +++++-
 .../modelComponents/hyperlink.component.ts    |  2 +-
 .../modelComponents/image.component.ts        | 10 ++++-
 .../modelComponents/infoBox.component.ts      |  2 +-
 .../modelComponents/inputbox.component.ts     | 18 ++++++++-
 .../modelComponents/listView.component.html   |  2 +-
 .../modelComponents/listView.component.ts     | 11 ++++--
 .../modelComponents/listbox.component.ts      |  9 ++++-
 .../modelComponents/radioButton.component.ts  |  2 +-
 .../radioCardGroup.component.html             |  3 +-
 .../radioCardGroup.component.ts               |  7 ++++
 .../modelComponents/separator.component.ts    |  2 +-
 .../splitviewContainer.component.ts           | 19 +++++++--
 .../tabbedPanel.component.html                |  2 +-
 .../modelComponents/table.component.ts        | 10 ++++-
 .../toolbarContainer.component.ts             |  2 +-
 .../browser/modelComponents/tree.component.ts |  9 ++++-
 26 files changed, 155 insertions(+), 58 deletions(-)

diff --git a/src/sql/workbench/browser/modelComponents/button.component.ts b/src/sql/workbench/browser/modelComponents/button.component.ts
index e65f7a6b04..1f41f4d455 100644
--- a/src/sql/workbench/browser/modelComponents/button.component.ts
+++ b/src/sql/workbench/browser/modelComponents/button.component.ts
@@ -31,13 +31,13 @@ import { IDisposable } from 'vs/base/common/lifecycle';
 	<div *ngIf="this.buttonType !== 'Informational'; then thenBlock else elseBlock"></div>
 	<ng-template #thenBlock>
 		<label for={{this.label}}>
-			<div #input style="width: 100%">
+			<div #input [ngStyle]="CSSStyles">
 				<input #fileInput *ngIf="this.isFile === true" id={{this.label}} type="file" accept="{{ this.fileType }}" style="display: none">
 			</div>
 		</label>
 	</ng-template>
 	<ng-template #elseBlock>
-		<div #infoButton style="width: 100%;"></div>
+		<div #infoButton [ngStyle]="CSSStyles"></div>
 	</ng-template>
 	`
 })
diff --git a/src/sql/workbench/browser/modelComponents/checkbox.component.ts b/src/sql/workbench/browser/modelComponents/checkbox.component.ts
index eba30c1546..71f5fdd2a2 100644
--- a/src/sql/workbench/browser/modelComponents/checkbox.component.ts
+++ b/src/sql/workbench/browser/modelComponents/checkbox.component.ts
@@ -23,7 +23,7 @@ import { ILogService } from 'vs/platform/log/common/log';
 @Component({
 	selector: 'modelview-checkbox',
 	template: `
-		<div #input width="100%" [style.display]="display"></div>
+		<div #input width="100%" [ngStyle]="CSSStyles"></div>
 	`
 })
 export default class CheckBoxComponent extends ComponentBase<azdata.CheckBoxProperties> implements IComponent, OnDestroy, AfterViewInit {
@@ -127,4 +127,10 @@ export default class CheckBoxComponent extends ComponentBase<azdata.CheckBoxProp
 	public focus(): void {
 		this._input.focus();
 	}
+
+	public get CSSStyles(): azdata.CssStyles {
+		return this.mergeCss(super.CSSStyles, {
+			'display': this.display
+		});
+	}
 }
diff --git a/src/sql/workbench/browser/modelComponents/componentBase.ts b/src/sql/workbench/browser/modelComponents/componentBase.ts
index 0b2da33a5f..09c5e224c3 100644
--- a/src/sql/workbench/browser/modelComponents/componentBase.ts
+++ b/src/sql/workbench/browser/modelComponents/componentBase.ts
@@ -86,17 +86,9 @@ export abstract class ComponentBase<TPropertyBag extends azdata.ComponentPropert
 	public refreshDataProvider(item: any): void {
 	}
 
-	public updateStyles(): void {
-		const element = (<HTMLElement>this._el.nativeElement);
-		for (const style in this.CSSStyles) {
-			element.style[style] = this.CSSStyles[style];
-		}
-	}
-
 	public setProperties(properties: { [key: string]: any; }): void {
 		properties = properties || {};
 		this.properties = properties;
-		this.updateStyles();
 		this.layout();
 		this.validate().catch(onUnexpectedError);
 	}
@@ -105,7 +97,6 @@ export abstract class ComponentBase<TPropertyBag extends azdata.ComponentPropert
 	public updateProperty(key: string, value: any): void {
 		if (key) {
 			this.properties[key] = value;
-			this.updateStyles();
 			this.layout();
 			this.validate().catch(onUnexpectedError);
 		}
@@ -209,12 +200,12 @@ export abstract class ComponentBase<TPropertyBag extends azdata.ComponentPropert
 		this.setPropertyFromUI<boolean>((props, value) => props.ariaHidden = value, newValue);
 	}
 
-	public get CSSStyles(): { [key: string]: string } {
-		return this.getPropertyOrDefault<{ [key: string]: string }>((props) => props.CSSStyles, {});
+	public get CSSStyles(): azdata.CssStyles {
+		return this.getPropertyOrDefault<azdata.CssStyles>((props) => props.CSSStyles, {});
 	}
 
-	public set CSSStyles(newValue: { [key: string]: string }) {
-		this.setPropertyFromUI<{ [key: string]: string }>((properties, CSSStyles) => { properties.CSSStyles = CSSStyles; }, newValue);
+	public set CSSStyles(newValue: azdata.CssStyles) {
+		this.setPropertyFromUI<azdata.CssStyles>((properties, CSSStyles) => { properties.CSSStyles = CSSStyles; }, newValue);
 	}
 
 	protected getWidth(): string {
@@ -274,6 +265,17 @@ export abstract class ComponentBase<TPropertyBag extends azdata.ComponentPropert
 	protected onkeydown(domNode: HTMLElement, listener: (e: StandardKeyboardEvent) => void): void {
 		this._register(addDisposableListener(domNode, EventType.KEY_DOWN, (e: KeyboardEvent) => listener(new StandardKeyboardEvent(e))));
 	}
+
+	protected mergeCss(...styles: azdata.CssStyles[]): azdata.CssStyles {
+		const x = styles.reduce((previous, current) => {
+			if (current) {
+				return Object.assign(previous, current);
+			}
+			return previous;
+		}, {});
+
+		return x;
+	}
 }
 
 export abstract class ContainerBase<T, TPropertyBag extends azdata.ComponentProperties = azdata.ComponentProperties> extends ComponentBase<TPropertyBag> {
@@ -389,17 +391,6 @@ export abstract class ContainerBase<T, TPropertyBag extends azdata.ComponentProp
 		return;
 	}
 
-	public mergeCss(...styles: azdata.CssStyles[]): azdata.CssStyles {
-		const x = styles.reduce((previous, current) => {
-			if (current) {
-				return Object.assign(previous, current);
-			}
-			return previous;
-		}, {});
-
-		return x;
-	}
-
 	protected onItemsUpdated(): void {
 	}
 
diff --git a/src/sql/workbench/browser/modelComponents/declarativeTable.component.html b/src/sql/workbench/browser/modelComponents/declarativeTable.component.html
index e51f706ec0..97d85418b4 100644
--- a/src/sql/workbench/browser/modelComponents/declarativeTable.component.html
+++ b/src/sql/workbench/browser/modelComponents/declarativeTable.component.html
@@ -1,5 +1,4 @@
-<table role="grid" #container *ngIf="columns" class="declarative-table" [style.height]="getHeight()"
-	[style.width]="getWidth()" [attr.aria-label]="ariaLabel">
+<table role="grid" #container *ngIf="columns" class="declarative-table" [attr.aria-label]="ariaLabel" [ngStyle]="CSSStyles">
 	<thead role="rowgroup">
 		<tr role="row">
 			<ng-container *ngFor="let column of columns; let c = index;">
diff --git a/src/sql/workbench/browser/modelComponents/declarativeTable.component.ts b/src/sql/workbench/browser/modelComponents/declarativeTable.component.ts
index c1ebae4d54..2eb736f24b 100644
--- a/src/sql/workbench/browser/modelComponents/declarativeTable.component.ts
+++ b/src/sql/workbench/browser/modelComponents/declarativeTable.component.ts
@@ -310,4 +310,11 @@ export default class DeclarativeTableComponent extends ContainerBase<any, azdata
 			});
 		}
 	}
+
+	public get CSSStyles(): azdata.CssStyles {
+		return this.mergeCss(super.CSSStyles, {
+			'width': this.getWidth(),
+			'height': this.getHeight()
+		});
+	}
 }
diff --git a/src/sql/workbench/browser/modelComponents/diffeditor.component.ts b/src/sql/workbench/browser/modelComponents/diffeditor.component.ts
index 50b320e8a3..5ae65539cd 100644
--- a/src/sql/workbench/browser/modelComponents/diffeditor.component.ts
+++ b/src/sql/workbench/browser/modelComponents/diffeditor.component.ts
@@ -32,7 +32,7 @@ import { ILogService } from 'vs/platform/log/common/log';
 
 @Component({
 	template: `
-	<div *ngIf="_title">
+	<div [ngStyle]="CSSStyles" *ngIf="_title">
 		<div class="modelview-diff-editor-title modelview-diff-editor-title-background">
 			{{_title}}
 		</div>
diff --git a/src/sql/workbench/browser/modelComponents/dropdown.component.ts b/src/sql/workbench/browser/modelComponents/dropdown.component.ts
index 6218699517..99747f628f 100644
--- a/src/sql/workbench/browser/modelComponents/dropdown.component.ts
+++ b/src/sql/workbench/browser/modelComponents/dropdown.component.ts
@@ -28,7 +28,7 @@ import { ILogService } from 'vs/platform/log/common/log';
 	selector: 'modelview-dropdown',
 	template: `
 
-	<div [style.width]="getWidth()">
+	<div [ngStyle]="CSSStyles">
 		<div [style.display]="getLoadingDisplay()" style="width: 100%; position: relative">
 			<div class="modelview-loadingComponent-spinner" style="position:absolute; right: 0px; margin-right: 5px; height:15px; z-index:1" #spinnerElement></div>
 			<div [style.display]="getLoadingDisplay()" #loadingBox style="width: 100%;"></div>
@@ -286,4 +286,10 @@ export default class DropDownComponent extends ComponentBase<azdata.DropDownProp
 	public getStatusText(): string {
 		return this.loading ? this.loadingText : this.loadingCompletedText;
 	}
+
+	public get CSSStyles(): azdata.CssStyles {
+		return this.mergeCss(super.CSSStyles, {
+			'width': this.getWidth()
+		});
+	}
 }
diff --git a/src/sql/workbench/browser/modelComponents/fileBrowserTree.component.ts b/src/sql/workbench/browser/modelComponents/fileBrowserTree.component.ts
index 908beba5e0..a3d0cdb7d6 100644
--- a/src/sql/workbench/browser/modelComponents/fileBrowserTree.component.ts
+++ b/src/sql/workbench/browser/modelComponents/fileBrowserTree.component.ts
@@ -20,7 +20,7 @@ import { ILogService } from 'vs/platform/log/common/log';
 @Component({
 	selector: 'modelview-fileBrowserTree',
 	template: `
-		<div #fileBrowserTree [style.width]="getWidth()" [style.height]="getHeight()"></div>
+		<div #fileBrowserTree [ngStyle]="CSSStyles"></div>
 	`
 })
 export default class FileBrowserTreeComponent extends ComponentBase<azdata.FileBrowserTreeProperties> implements IComponent, OnDestroy, AfterViewInit {
@@ -121,4 +121,11 @@ export default class FileBrowserTreeComponent extends ComponentBase<azdata.FileB
 	public set ownerUri(newValue: string) {
 		this.setPropertyFromUI<string>((props, value) => props.ownerUri = value, newValue);
 	}
+
+	public get CSSStyles(): azdata.CssStyles {
+		return this.mergeCss(super.CSSStyles, {
+			'width': this.getWidth(),
+			'height': this.getHeight()
+		});
+	}
 }
diff --git a/src/sql/workbench/browser/modelComponents/formContainer.component.ts b/src/sql/workbench/browser/modelComponents/formContainer.component.ts
index a97d72170f..680340beb7 100644
--- a/src/sql/workbench/browser/modelComponents/formContainer.component.ts
+++ b/src/sql/workbench/browser/modelComponents/formContainer.component.ts
@@ -9,7 +9,7 @@ import {
 	ElementRef, OnDestroy, AfterViewInit
 } from '@angular/core';
 
-import { FormLayout, FormItemLayout } from 'azdata';
+import { FormLayout, FormItemLayout, CssStyles } from 'azdata';
 
 import { ContainerBase } from 'sql/workbench/browser/modelComponents/componentBase';
 import { IComponentDescriptor, IComponent, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
@@ -36,7 +36,7 @@ class FormItem {
 
 @Component({
 	template: `
-		<div #container *ngIf="items" class="form-table" [style.padding]="getFormPadding()" [style.width]="getFormWidth()" [style.height]="getFormHeight()" role="presentation">
+		<div #container [ngStyle]="CSSStyles" *ngIf="items" class="form-table" role="presentation">
 			<ng-container *ngFor="let item of items">
 			<div class="form-row" *ngIf="isGroupLabel(item)" [style.font-size]="getItemTitleFontSize(item)">
 				<div class="form-item-row form-group-label">
@@ -223,4 +223,12 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
 	public isVertical(item: FormItem): boolean {
 		return item && item.config && !item.config.horizontal;
 	}
+
+	public get CSSStyles(): CssStyles {
+		return this.mergeCss(super.CSSStyles, {
+			'padding': this.getFormPadding(),
+			'width': this.getFormWidth(),
+			'height': this.getFormHeight()
+		});
+	}
 }
diff --git a/src/sql/workbench/browser/modelComponents/groupContainer.component.ts b/src/sql/workbench/browser/modelComponents/groupContainer.component.ts
index 407e11b05e..6b8570d498 100644
--- a/src/sql/workbench/browser/modelComponents/groupContainer.component.ts
+++ b/src/sql/workbench/browser/modelComponents/groupContainer.component.ts
@@ -9,7 +9,7 @@ import {
 	ElementRef, OnDestroy, AfterViewInit
 } from '@angular/core';
 
-import { GroupLayout, GroupContainerProperties } from 'azdata';
+import { GroupLayout, GroupContainerProperties, CssStyles } from 'azdata';
 
 import { ContainerBase } from 'sql/workbench/browser/modelComponents/componentBase';
 import { endsWith } from 'vs/base/common/strings';
@@ -25,7 +25,7 @@ import { ILogService } from 'vs/platform/log/common/log';
 		<div *ngIf="hasHeader()" [class]="getHeaderClass()" (click)="changeState()" (keydown)="onKeyDown($event)" [tabindex]="isCollapsible()? 0 : -1" [attr.role]="isCollapsible() ? 'button' : null" [attr.aria-expanded]="isCollapsible() ? !collapsed : null">
 				{{_containerLayout.header}}
 		</div>
-		<div #container *ngIf="items" class="modelview-group-container" [style.width]="getContainerWidth()" [style.display]="getContainerDisplayStyle()">
+		<div #container *ngIf="items" class="modelview-group-container" [ngStyle]="CSSStyles">
 			<ng-container *ngFor="let item of items">
 			<div class="modelview-group-row" >
 				<div  class="modelview-group-cell">
@@ -132,4 +132,11 @@ export default class GroupContainer extends ContainerBase<GroupLayout, GroupCont
 			this._changeRef.detectChanges();
 		}
 	}
+
+	public get CSSStyles(): CssStyles {
+		return this.mergeCss(super.CSSStyles, {
+			'display': this.getContainerDisplayStyle(),
+			'width': this.getContainerWidth(),
+		});
+	}
 }
diff --git a/src/sql/workbench/browser/modelComponents/hyperlink.component.ts b/src/sql/workbench/browser/modelComponents/hyperlink.component.ts
index 495a86cc0a..567045aae7 100644
--- a/src/sql/workbench/browser/modelComponents/hyperlink.component.ts
+++ b/src/sql/workbench/browser/modelComponents/hyperlink.component.ts
@@ -21,7 +21,7 @@ import { ILogService } from 'vs/platform/log/common/log';
 
 @Component({
 	selector: 'modelview-hyperlink',
-	template: `<a [href]="url" [title]="title" [attr.aria-label]="ariaLabel" target="blank" [class]="cssClass">{{label}}</a>`
+	template: `<a [href]="url" [title]="title" [attr.aria-label]="ariaLabel" target="blank" [ngStyle]="CSSStyles" [class]="cssClass">{{label}}</a>`
 })
 export default class HyperlinkComponent extends TitledComponent<azdata.HyperlinkComponentProperties> implements IComponent, OnDestroy, AfterViewInit {
 	@Input() descriptor: IComponentDescriptor;
diff --git a/src/sql/workbench/browser/modelComponents/image.component.ts b/src/sql/workbench/browser/modelComponents/image.component.ts
index 7e3c482584..f9525ea913 100644
--- a/src/sql/workbench/browser/modelComponents/image.component.ts
+++ b/src/sql/workbench/browser/modelComponents/image.component.ts
@@ -18,7 +18,7 @@ import { ILogService } from 'vs/platform/log/common/log';
 @Component({
 	selector: 'modelview-image',
 	template: `
-		<div #imageContainer [title]="title" [style.width]="getWidth()" [style.height]="getHeight()" [style.background-size]="getImageSize()">`
+		<div #imageContainer [ngStyle]="CSSStyles" [title]="title">`
 })
 export default class ImageComponent extends ComponentWithIconBase<azdata.ImageComponentProperties> implements ITitledComponent, IComponent, OnDestroy, AfterViewInit {
 	@Input() descriptor: IComponentDescriptor;
@@ -69,4 +69,12 @@ export default class ImageComponent extends ComponentWithIconBase<azdata.ImageCo
 	public getImageSize(): string {
 		return `${this.getIconWidth()} ${this.getIconHeight()}`;
 	}
+
+	public get CSSStyles(): azdata.CssStyles {
+		return this.mergeCss(super.CSSStyles, {
+			'background-size': this.getImageSize(),
+			'width': this.getWidth(),
+			'height': this.getHeight()
+		});
+	}
 }
diff --git a/src/sql/workbench/browser/modelComponents/infoBox.component.ts b/src/sql/workbench/browser/modelComponents/infoBox.component.ts
index 2830c81e4a..baf44eb13a 100644
--- a/src/sql/workbench/browser/modelComponents/infoBox.component.ts
+++ b/src/sql/workbench/browser/modelComponents/infoBox.component.ts
@@ -18,7 +18,7 @@ import { attachInfoBoxStyler } from 'sql/platform/theme/common/styler';
 @Component({
 	selector: 'modelview-infobox',
 	template: `
-		<div #container>
+		<div #container [ngStyle]="CSSStyles">
 		</div>`
 })
 export default class InfoBoxComponent extends ComponentBase<azdata.InfoBoxComponentProperties> implements IComponent, OnDestroy, AfterViewInit {
diff --git a/src/sql/workbench/browser/modelComponents/inputbox.component.ts b/src/sql/workbench/browser/modelComponents/inputbox.component.ts
index cabaf5ab8a..de943ee708 100644
--- a/src/sql/workbench/browser/modelComponents/inputbox.component.ts
+++ b/src/sql/workbench/browser/modelComponents/inputbox.component.ts
@@ -32,8 +32,8 @@ import { ILogService } from 'vs/platform/log/common/log';
 @Component({
 	selector: 'modelview-inputBox',
 	template: `
-			<div [style.display]="getInputBoxDisplay()" #input [style.width]="width" ></div>
-			<div [style.display]="getTextAreaDisplay()" #textarea [style.width]="width" ></div>
+			<div #input [ngStyle]="inputBoxCSSStyles"></div>
+			<div #textarea [ngStyle]="textAreaCSSStyles"></div>
 	`
 })
 export default class InputBoxComponent extends ComponentBase<azdata.InputBoxProperties> implements IComponent, OnDestroy, AfterViewInit {
@@ -363,4 +363,18 @@ export default class InputBoxComponent extends ComponentBase<azdata.InputBoxProp
 	public set validationErrorMessage(newValue: string) {
 		this.setPropertyFromUI<string>((props, value) => props.validationErrorMessage = value, newValue);
 	}
+
+	public get inputBoxCSSStyles(): azdata.CssStyles {
+		return this.mergeCss(super.CSSStyles, {
+			'width': this.getWidth(),
+			'display': this.getInputBoxDisplay()
+		});
+	}
+
+	public get textAreaCSSStyles(): azdata.CssStyles {
+		return this.mergeCss(super.CSSStyles, {
+			'width': this.getWidth(),
+			'display': this.getTextAreaDisplay()
+		});
+	}
 }
diff --git a/src/sql/workbench/browser/modelComponents/listView.component.html b/src/sql/workbench/browser/modelComponents/listView.component.html
index f62fa6ee16..e658cbbc97 100644
--- a/src/sql/workbench/browser/modelComponents/listView.component.html
+++ b/src/sql/workbench/browser/modelComponents/listView.component.html
@@ -1,4 +1,4 @@
-<div role="listbox" class="modelview-listview-container" [ngStyle]="styles" [style.width]="width" [style.height]="height">
+<div role="listbox" class="modelview-listview-container" [ngStyle]="CSSStyles">
 	<div *ngIf="title" class="modelview-listview-title">{{title.text}}</div>
 	<div #vscodelist> </div>
 </div>
diff --git a/src/sql/workbench/browser/modelComponents/listView.component.ts b/src/sql/workbench/browser/modelComponents/listView.component.ts
index 12f68899b2..2763987fa6 100644
--- a/src/sql/workbench/browser/modelComponents/listView.component.ts
+++ b/src/sql/workbench/browser/modelComponents/listView.component.ts
@@ -92,10 +92,6 @@ export default class ListViewComponent extends ComponentBase<azdata.ListViewComp
 		return this.getProperties().height ?? undefined;
 	}
 
-	public get styles(): azdata.CssStyles | undefined {
-		return this.getProperties().CSSStyles ?? undefined;
-	}
-
 	public get title(): azdata.ListViewTitle {
 		return this.getProperties().title ?? undefined;
 	}
@@ -143,6 +139,13 @@ export default class ListViewComponent extends ComponentBase<azdata.ListViewComp
 			this._optionsList.setFocus([focusElement]);
 		}
 	}
+
+	public get CSSStyles(): azdata.CssStyles {
+		return this.mergeCss(super.CSSStyles, {
+			'width': this.getWidth(),
+			'height': this.getHeight()
+		});
+	}
 }
 
 class OptionListDelegate implements IListVirtualDelegate<azdata.ListViewOption> {
diff --git a/src/sql/workbench/browser/modelComponents/listbox.component.ts b/src/sql/workbench/browser/modelComponents/listbox.component.ts
index 44be9c42d6..0ea07fe52a 100644
--- a/src/sql/workbench/browser/modelComponents/listbox.component.ts
+++ b/src/sql/workbench/browser/modelComponents/listbox.component.ts
@@ -24,7 +24,7 @@ import { ILogService } from 'vs/platform/log/common/log';
 @Component({
 	selector: 'modelview-listBox',
 	template: `
-		<div #input style="width: 100%"></div>
+		<div #input [ngStyle]="CSSStyles"></div>
 	`
 })
 export default class ListBoxComponent extends ComponentBase<azdata.ListBoxProperties> implements IComponent, OnDestroy, AfterViewInit {
@@ -112,4 +112,11 @@ export default class ListBoxComponent extends ComponentBase<azdata.ListBoxProper
 	private set selectedRow(newValue: number) {
 		this.setPropertyFromUI<number>((props, value) => props.selectedRow = value, newValue);
 	}
+
+
+	public get CSSStyles(): azdata.CssStyles {
+		return this.mergeCss(super.CSSStyles, {
+			'width': '100%'
+		});
+	}
 }
diff --git a/src/sql/workbench/browser/modelComponents/radioButton.component.ts b/src/sql/workbench/browser/modelComponents/radioButton.component.ts
index 19a7d4ff07..18890eebd1 100644
--- a/src/sql/workbench/browser/modelComponents/radioButton.component.ts
+++ b/src/sql/workbench/browser/modelComponents/radioButton.component.ts
@@ -19,7 +19,7 @@ import { ILogService } from 'vs/platform/log/common/log';
 @Component({
 	selector: 'modelview-radioButton',
 	template: `
-		<div #input class="modelview-radiobutton-container">
+		<div #input [ngStyle]="CSSStyles" class="modelview-radiobutton-container">
 
 		</div>
 	`
diff --git a/src/sql/workbench/browser/modelComponents/radioCardGroup.component.html b/src/sql/workbench/browser/modelComponents/radioCardGroup.component.html
index 15f531ca5d..a4968b4334 100644
--- a/src/sql/workbench/browser/modelComponents/radioCardGroup.component.html
+++ b/src/sql/workbench/browser/modelComponents/radioCardGroup.component.html
@@ -1,5 +1,4 @@
-<div role="radiogroup" *ngIf="cards" [class]="orientation + ' card-group'" class="card-group" style="flex-wrap:wrap"
-	[style.height]="height" [style.width]="width" [attr.aria-label]="ariaLabel" (keydown)="onKeyDown($event)">
+<div role="radiogroup" *ngIf="cards" [ngStyle]="CSSStyles" [class]="orientation + ' card-group'" class="card-group" [attr.aria-label]="ariaLabel" (keydown)="onKeyDown($event)">
 	<div #cardDiv role="radio" *ngFor="let card of cards" class="model-card" (click)="selectCard(card.id)"
 		[attr.aria-checked]="isCardSelected(card.id)" [tabIndex]="getTabIndex(card.id)" [style.width]="cardWidth"
 		[style.height]="cardHeight" (focus)="onCardFocus(card.id)" (blur)="onCardBlur(card.id)" style="flex:0 0 auto;">
diff --git a/src/sql/workbench/browser/modelComponents/radioCardGroup.component.ts b/src/sql/workbench/browser/modelComponents/radioCardGroup.component.ts
index abfe207380..de93b96880 100644
--- a/src/sql/workbench/browser/modelComponents/radioCardGroup.component.ts
+++ b/src/sql/workbench/browser/modelComponents/radioCardGroup.component.ts
@@ -225,4 +225,11 @@ export default class RadioCardGroup extends ComponentBase<azdata.RadioCardGroupC
 	public onCardBlur(cardId: string): void {
 		this.focusedCardId = undefined;
 	}
+
+	public get CSSStyles(): azdata.CssStyles {
+		return this.mergeCss(super.CSSStyles, {
+			'width': this.getWidth(),
+			'height': this.getHeight()
+		});
+	}
 }
diff --git a/src/sql/workbench/browser/modelComponents/separator.component.ts b/src/sql/workbench/browser/modelComponents/separator.component.ts
index 065b73a302..0e4bdd2968 100644
--- a/src/sql/workbench/browser/modelComponents/separator.component.ts
+++ b/src/sql/workbench/browser/modelComponents/separator.component.ts
@@ -18,7 +18,7 @@ import { ILogService } from 'vs/platform/log/common/log';
 @Component({
 	selector: `modelview-separator`,
 	template: `
-		<div #separator> </div>
+		<div [ngStyle]="CSSStyles" #separator> </div>
 	`
 })
 export default class SeparatorComponent extends ComponentBase<azdata.SeparatorComponentProperties> implements IComponent, OnDestroy, AfterViewInit {
diff --git a/src/sql/workbench/browser/modelComponents/splitviewContainer.component.ts b/src/sql/workbench/browser/modelComponents/splitviewContainer.component.ts
index 99c36826d6..e2036973c4 100644
--- a/src/sql/workbench/browser/modelComponents/splitviewContainer.component.ts
+++ b/src/sql/workbench/browser/modelComponents/splitviewContainer.component.ts
@@ -5,7 +5,7 @@
 import 'vs/css!./media/flexContainer';
 import { Component, Input, Inject, ChangeDetectorRef, forwardRef, ElementRef, OnDestroy } from '@angular/core';
 
-import { FlexItemLayout, SplitViewLayout, SplitViewContainer } from 'azdata';
+import { FlexItemLayout, SplitViewLayout, SplitViewContainer, CssStyles } from 'azdata';
 import { FlexItem } from './flexContainer.component';
 import { ContainerBase, ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
 import { Event } from 'vs/base/common/event';
@@ -37,8 +37,7 @@ class SplitPane implements IView {
 
 @Component({
 	template: `
-		<div *ngIf="items" class="splitViewContainer" [style.flexFlow]="flexFlow" [style.justifyContent]="justifyContent" [style.position]="position"
-				[style.alignItems]="alignItems" [style.alignContent]="alignContent" [style.height]="height" [style.width]="width">
+		<div *ngIf="items" class="splitViewContainer" [ngStyle]="CSSStyles">
 			<div *ngFor="let item of items" [style.flex]="getItemFlex(item)" [style.textAlign]="textAlign" [style.order]="getItemOrder(item)" [ngStyle]="getItemStyles(item)">
 				<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
 				</model-component-wrapper>
@@ -164,10 +163,24 @@ export default class SplitViewContainerImpl extends ContainerBase<FlexItemLayout
 	public getItemFlex(item: FlexItem): string {
 		return item.config ? item.config.flex : '1 1 auto';
 	}
+
 	public getItemOrder(item: FlexItem): number {
 		return item.config ? item.config.order : 0;
 	}
+
 	public getItemStyles(item: FlexItem): { [key: string]: string } {
 		return item.config && item.config.CSSStyles ? item.config.CSSStyles : {};
 	}
+
+	public get CSSStyles(): CssStyles {
+		return this.mergeCss(super.CSSStyles, {
+			'width': this.getWidth(),
+			'height': this.getHeight(),
+			'flexFlow': this.flexFlow,
+			'justifyContent': this.justifyContent,
+			'position': this.position,
+			'alignItems': this.alignItems,
+			'alignContent': this.alignContent
+		});
+	}
 }
diff --git a/src/sql/workbench/browser/modelComponents/tabbedPanel.component.html b/src/sql/workbench/browser/modelComponents/tabbedPanel.component.html
index b09c655266..679e52daa2 100644
--- a/src/sql/workbench/browser/modelComponents/tabbedPanel.component.html
+++ b/src/sql/workbench/browser/modelComponents/tabbedPanel.component.html
@@ -4,7 +4,7 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 -->
-<div class="tabbedpanel-component">
+<div class="tabbedpanel-component" [ngStyle]="CSSStyles">
 	<panel (onTabChange)="handleTabChange($event)">
 		<tab [visibilityType]="'visibility'" *ngFor="let tab of tabs" [title]="tab.title" class="fullsize"
 			[identifier]="tab.id" [type]="tab.type" [iconClass]="tab.iconClass">
diff --git a/src/sql/workbench/browser/modelComponents/table.component.ts b/src/sql/workbench/browser/modelComponents/table.component.ts
index 1193e90ed8..b879fa42d8 100644
--- a/src/sql/workbench/browser/modelComponents/table.component.ts
+++ b/src/sql/workbench/browser/modelComponents/table.component.ts
@@ -55,7 +55,7 @@ type TableCellDataType = string | CssIconCellValue | ButtonCellValue | Hyperlink
 @Component({
 	selector: 'modelview-table',
 	template: `
-		<div #table style="height:100%;" [style.font-size]="fontSize" [style.width]="width"></div>
+		<div #table [ngStyle]="CSSStyles"></div>
 	`
 })
 export default class TableComponent extends ComponentBase<azdata.TableComponentProperties> implements IComponent, OnDestroy, AfterViewInit {
@@ -621,4 +621,12 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
 			this._table.grid.getActiveCellNode().focus();
 		}
 	}
+
+	public get CSSStyles(): azdata.CssStyles {
+		return this.mergeCss(super.CSSStyles, {
+			'width': this.getWidth(),
+			'height': '100%',
+			'font-size': this.fontSize
+		});
+	}
 }
diff --git a/src/sql/workbench/browser/modelComponents/toolbarContainer.component.ts b/src/sql/workbench/browser/modelComponents/toolbarContainer.component.ts
index 0f710e6744..9472a23409 100644
--- a/src/sql/workbench/browser/modelComponents/toolbarContainer.component.ts
+++ b/src/sql/workbench/browser/modelComponents/toolbarContainer.component.ts
@@ -34,7 +34,7 @@ export class ToolbarItem {
 @Component({
 	selector: 'modelview-toolbarContainer',
 	template: `
-		<div #container *ngIf="items" [class]="toolbarClass" >
+		<div #container *ngIf="items" [class]="toolbarClass" [ngStyle]="CSSStyles">
 			<ng-container *ngFor="let item of items">
 			<div class="modelview-toolbar-item" [style.paddingTop]="paddingTop">
 				<div *ngIf="shouldShowTitle(item)" class="modelview-toolbar-title" >
diff --git a/src/sql/workbench/browser/modelComponents/tree.component.ts b/src/sql/workbench/browser/modelComponents/tree.component.ts
index b81d58a559..1e442ea846 100644
--- a/src/sql/workbench/browser/modelComponents/tree.component.ts
+++ b/src/sql/workbench/browser/modelComponents/tree.component.ts
@@ -43,7 +43,7 @@ class Root implements ITreeComponentItem {
 @Component({
 	selector: 'modelview-tree',
 	template: `
-		<div #input style="width: 100%;height:100%"></div>
+		<div #input [ngStyle]="CSSStyles"></div>
 	`
 })
 export default class TreeComponent extends ComponentBase<azdata.TreeProperties> implements IComponent, OnDestroy, AfterViewInit {
@@ -169,4 +169,11 @@ export default class TreeComponent extends ComponentBase<azdata.TreeProperties>
 	public set withCheckbox(newValue: boolean) {
 		this.setPropertyFromUI<boolean>((properties, value) => { properties.withCheckbox = value; }, newValue);
 	}
+
+	public get CSSStyles(): azdata.CssStyles {
+		return this.mergeCss(super.CSSStyles, {
+			'width': '100%',
+			'height': '100%'
+		});
+	}
 }