#1454 - Align element in form (#1524)

This commit is contained in:
Vito
2017-01-24 00:51:25 +00:00
committed by Mario Romano
parent eacdfd7f6a
commit 32558da0a7
5 changed files with 31 additions and 6 deletions
@@ -18,3 +18,7 @@
.container-widget__header-text.collapsible {
cursor: pointer;
}
.container-widget__mdl-grid {
align-items: center;
}
@@ -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>
@@ -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;
}
@@ -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>
@@ -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 {