diff --git a/src/sql/parts/modelComponents/formContainer.component.ts b/src/sql/parts/modelComponents/formContainer.component.ts index fe0e876713..450c83bb11 100644 --- a/src/sql/parts/modelComponents/formContainer.component.ts +++ b/src/sql/parts/modelComponents/formContainer.component.ts @@ -22,18 +22,22 @@ export interface TitledFormItemLayout { actions?: string[]; isFormComponent: Boolean; horizontal: boolean; - width: number; componentWidth: number; } + +export interface FormLayout { + width: number; +} + class FormItem { constructor(public descriptor: IComponentDescriptor, public config: TitledFormItemLayout) { } } @Component({ template: ` -
+
-
+
{{getItemTitle(item)}}
@@ -77,6 +81,7 @@ export default class FormContainer extends ContainerBase impleme private _alignItems: string; private _alignContent: string; + private _formLayout: FormLayout; @ViewChildren(ModelComponentWrapper) private _componentWrappers: QueryList; @ViewChild('container', { read: ElementRef }) private _container: ElementRef; @@ -116,9 +121,8 @@ export default class FormContainer extends ContainerBase impleme return this._alignContent; } - private getFormWidth(item: FormItem): string { - let itemConfig = item.config; - return itemConfig && itemConfig.width ? +itemConfig.width + 'px' : '100%'; + private getFormWidth(): string { + return this._formLayout && this._formLayout.width ? +this._formLayout.width + 'px' : '100%'; } private getComponentWidth(item: FormItem): string { @@ -155,7 +159,8 @@ export default class FormContainer extends ContainerBase impleme return itemConfig && itemConfig.actions !== undefined && itemConfig.actions.length > 0; } - public setLayout(layout: any): void { + public setLayout(layout: FormLayout): void { + this._formLayout = layout; this.layout(); } diff --git a/src/sql/parts/modelComponents/formLayout.css b/src/sql/parts/modelComponents/formLayout.css index e45fa54520..b81e56f6f0 100644 --- a/src/sql/parts/modelComponents/formLayout.css +++ b/src/sql/parts/modelComponents/formLayout.css @@ -1,6 +1,5 @@ .form-table { - width: 100%; display: table; padding: 10px 30px 0px 30px; box-sizing: border-box; diff --git a/src/sql/sqlops.proposed.d.ts b/src/sql/sqlops.proposed.d.ts index 8d8bf3ac73..38438108a2 100644 --- a/src/sql/sqlops.proposed.d.ts +++ b/src/sql/sqlops.proposed.d.ts @@ -184,12 +184,11 @@ declare module 'sqlops' { export interface FormItemLayout { horizontal: boolean; - width: number; componentWidth: number; } export interface FormLayout { - + width: number; } export interface FlexContainer extends Container {