fixed two layout issues in model view components (microsoft#1647)

kod3r · Jun 18, 2018 · a2a87f8 · a2a87f8
1 parent 83c01c6
commit a2a87f8
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/src/sql/parts/modelComponents/componentBase.ts b/src/sql/parts/modelComponents/componentBase.ts
@@ -138,9 +138,17 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
 		return +size;
 	}
 
+	protected getWidth(): string {
+		return this.width ? this.convertSize(this.width) : '';
+	}
+
+	protected getHeight(): string {
+		return this.height ? this.convertSize(this.height) : '';
+	}
+
 	protected convertSize(size: number | string): string {
 		if (types.isUndefinedOrNull(size)) {
-			return '';
+			return '100%';
 		}
 		let convertedSize: string = size ? size.toString() : '100%';
 		if (!convertedSize.toLowerCase().endsWith('px') && !convertedSize.toLowerCase().endsWith('%')) {

diff --git a/src/sql/parts/modelComponents/dropdown.component.ts b/src/sql/parts/modelComponents/dropdown.component.ts
@@ -27,7 +27,7 @@ import { attachListStyler } from 'vs/platform/theme/common/styler';
 	selector: 'modelview-dropdown',
 	template: `
 
-	<div>
+	<div [style.width]="getWidth()">
 		<div [style.display]="getEditableDisplay()"   #editableDropDown style="width: 100%;"></div>
 		<div [style.display]="getNotEditableDisplay()" #dropDown style="width: 100%;"></div>
 	</div>