diff --git a/src/sql/parts/modelComponents/componentBase.ts b/src/sql/parts/modelComponents/componentBase.ts
index fa8d2a46db..c812f34272 100644
--- 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
index 4665a0ddda..2f3f2788fa 100644
--- 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>