#1454 - Align element in form (#1524)

ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.css

@@ -18,3 +18,7 @@
 .container-widget__header-text.collapsible {
     cursor: pointer;
 }
+
+.container-widget__mdl-grid {
+    align-items: center;
+}

ng2-components/ng2-activiti-form/src/components/widgets/container/container.widget.html

@@ -11,9 +11,9 @@
             <span (click)="onExpanderClicked()" id="container-header-label">{{content.name}}</span>
         </h4>
     </div>
-    <div class="mdl-grid" [ngClass]="{'hidden':!(content?.isVisible && content?.isExpanded)}">
+    <div class="mdl-grid container-widget__mdl-grid" [ngClass]="{'hidden':!(content?.isVisible && content?.isExpanded)}">
         <div *ngFor="let col of content.columns" class="mdl-cell mdl-cell--{{col.size}}-col">
-            <div class="mdl-grid" *ngIf="col.hasFields()">
+            <div class="mdl-grid container-widget__mdl-grid" *ngIf="col.hasFields()">
                 <div *ngFor="let field of col.fields" class="mdl-cell mdl-cell--12-col">
                     <form-field [field]="field"></form-field>
                 </div>

ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.css

@@ -1,9 +1,21 @@
 .date-widget {
     width: 100%;
+    padding-top: 10px;
+    padding-bottom: 10px;
 }
 
 .date-widget--button {
-    margin-top: 15px;
+    margin-top: 10px;
+}
+
+.mdl-date__input{
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+.mdl-grid__date-widget{
+    align-items:center;
+    padding: 0px;
 }
 
 .date-widget__invalid .mdl-textfield__input {
@@ -21,3 +33,8 @@
 .date-widget__invalid .mdl-textfield__error {
     visibility: visible !important;
 }
+
+.date-widget-button__cell{
+    margin-top: 0px;
+    margin-bottom: 0px;
+}

ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.html

@@ -1,9 +1,9 @@
-<div class="mdl-grid" *ngIf="field?.isVisible" id="data-widget">
+<div class="mdl-grid mdl-grid__date-widget" *ngIf="field?.isVisible" id="data-widget">
     <div class="mdl-cell mdl-cell--11-col">
         <div class="mdl-textfield mdl-js-textfield date-widget"
              [class.date-widget__invalid]="!field.isValid">
             <label [attr.for]="field.id">{{field.name}}</label>
-            <input class="mdl-textfield__input"
+            <input class="mdl-textfield__input mdl-date__input"
                    type="text"
                    [attr.id]="field.id"
                    [attr.required]="isRequired()"
@@ -17,7 +17,7 @@
     </div>
     <div class="mdl-cell mdl-cell--1-col">
         <button
-            class="mdl-button mdl-js-button mdl-button--icon date-widget--button"
+            class="mdl-button mdl-js-button mdl-button--icon"
             (click)="datePicker.toggle()">
             <i class="material-icons">date_range</i>
         </button>

ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.css

@@ -1,9 +1,13 @@
 .dropdown-widget {
     width: 100%;
+    padding-top: 20px;
+    padding-bottom: 20px;
 }
 
 .dropdown-widget__select {
     width: 100%;
+    margin-top: 5px;
+    margin-bottom: 5px;
 }
 
 .dropdown-widget__invalid .dropdown-widget__select {