diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.html
index 813a69dab3..9052855031 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.html
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.html
@@ -11,15 +11,10 @@
-
-
-
-
-
+
+
+
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.scss b/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.scss
index cd9eb7300a..dfe37c704b 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.scss
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.scss
@@ -29,12 +29,22 @@
}
container-widget{
- md-grid-list {
- height:100px;
+ .grid-list {
+ display: flex;
+ flex-wrap: wrap;
+ margin-left: -1%;
+ margin-right: -1%;
+ }
+
+ .grid-list-item {
+ flex-grow: 1;
+ box-sizing: border-box;
+ padding-left: 1%;
+ padding-right: 1%;
}
md-input-container {
- width: 95%;
+ width: 100%;
}
.mat-input-placeholder-wrapper{
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.spec.ts
index 1016f63e26..4b0f5eb8a7 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.spec.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.spec.ts
@@ -26,6 +26,7 @@ import { EcmModelService } from './../../../services/ecm-model.service';
import { FormService } from './../../../services/form.service';
import { FormFieldComponent } from './../../form-field/form-field.component';
import { ContentWidgetComponent } from './../content/content.widget';
+import { ContainerColumnModel } from './../core/container-column.model';
import { FormFieldTypes } from './../core/form-field-types';
import { FormFieldModel } from './../core/form-field.model';
import { FormModel } from './../core/form.model';
@@ -211,7 +212,57 @@ describe('ContainerWidgetComponent', () => {
});
widget.onFieldChanged(null);
}));
-
});
+ describe('fields', () => {
+
+ it('should serializes the content fields', () => {
+ const field1 = {id: '1'},
+ field2 = {id: '2'},
+ field3 = {id: '3'},
+ field4 = {id: '4'},
+ field5 = {id: '5'},
+ field6 = {id: '6'};
+
+ let container = new ContainerWidgetComponentModel(new FormFieldModel(new FormModel()));
+ container.columns = [
+ { fields: [
+ field1,
+ field2,
+ field3
+ ] },
+ { fields: [
+ field4,
+ field5
+ ] },
+ { fields: [
+ field6
+ ] }
+ ];
+
+ widget.content = container;
+
+ expect(widget.fields[0].id).toEqual('1');
+ expect(widget.fields[1].id).toEqual('4');
+ expect(widget.fields[2].id).toEqual('6');
+ expect(widget.fields[3].id).toEqual('2');
+ expect(widget.fields[4].id).toEqual('5');
+ expect(widget.fields[5]).toEqual(undefined);
+ expect(widget.fields[6].id).toEqual('3');
+ expect(widget.fields[7]).toEqual(undefined);
+ expect(widget.fields[8]).toEqual(undefined);
+ });
+ });
+
+ describe('getColumnWith', () => {
+
+ it('should calculate the column width based on the numberOfColumns and current field\'s colspan property', () => {
+ let container = new ContainerWidgetComponentModel(new FormFieldModel(new FormModel(), { numberOfColumns: 4 }));
+ widget.content = container;
+
+ expect(widget.getColumnWith(undefined)).toBe('25%');
+ expect(widget.getColumnWith( { colspan: 1 })).toBe('25%');
+ expect(widget.getColumnWith( { colspan: 3 })).toBe('75%');
+ });
+ });
});
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.ts
index ca0c175471..a4fa870ba8 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.ts
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.ts
@@ -19,6 +19,7 @@
import { AfterViewInit, Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormService } from './../../../services/form.service';
+import { FormFieldModel } from './../core/form-field.model';
import { baseHost , WidgetComponent } from './../widget.component';
import { ContainerWidgetComponentModel } from './container.widget.model';
@@ -48,4 +49,39 @@ export class ContainerWidgetComponent extends WidgetComponent implements OnInit,
this.content = new ContainerWidgetComponentModel(this.field);
}
}
+
+ /**
+ * Serializes column fields
+ */
+ get fields(): FormFieldModel[] {
+ const fields = [];
+
+ let rowContainsElement = true,
+ rowIndex = 0;
+
+ while (rowContainsElement) {
+ rowContainsElement = false;
+ for (let i = 0; i < this.content.columns.length; i++ ) {
+ let field = this.content.columns[i].fields[rowIndex];
+ if (field) {
+ rowContainsElement = true;
+ }
+
+ fields.push(field);
+ }
+ rowIndex++;
+ }
+
+ return fields;
+ }
+
+ /**
+ * Calculate the column width based on the numberOfColumns and current field's colspan property
+ *
+ * @param field
+ */
+ getColumnWith(field: FormFieldModel): string {
+ const colspan = field ? field.colspan : 1;
+ return (100 / this.content.json.numberOfColumns) * colspan + '%';
+ }
}
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.scss b/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.scss
index cdff33bbaa..2f0ec62724 100644
--- a/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.scss
+++ b/ng2-components/ng2-activiti-form/src/components/widgets/upload/upload.widget.scss
@@ -5,7 +5,6 @@
&-upload-widget-container{
margin-bottom: 15px;
- max-height: 80px;
}
&-upload-widget {