Fix form layout spacing (#1401)

This commit is contained in:
Matt Irvine
2018-05-14 11:06:50 -07:00
committed by GitHub
parent 41ffd6e8ae
commit 3aaf8a24bf
2 changed files with 42 additions and 31 deletions

View File

@@ -37,34 +37,34 @@ class FormItem {
<ng-container *ngIf="isFormComponent(item)">
<ng-container *ngIf="isHorizontal(item)">
<div class="form-cell">{{getItemTitle(item)}}</div>
<div class="form-cell" [style.width]="getComponentWidth(item)">
<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
</model-component-wrapper>
</div>
<div *ngIf="itemHasActions(item)" class="form-cell">
<div class="form-actions-table">
<div *ngFor="let actionItem of getActionComponents(item)" class="form-cell" >
<model-component-wrapper [descriptor]="actionItem.descriptor" [modelStore]="modelStore" >
<div class="form-cell">
<div class="form-component-container">
<div [style.width]="getComponentWidth(item)" [ngClass]="{'form-input-flex': !getComponentWidth(item)}">
<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
</model-component-wrapper>
</div>
<div *ngIf="itemHasActions(item)" class="form-component-actions">
<ng-container *ngFor="let actionItem of getActionComponents(item)">
<model-component-wrapper [descriptor]="actionItem.descriptor" [modelStore]="modelStore" >
</model-component-wrapper>
</ng-container>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="isVertical(item)">
<div class="form-item-row form-item-title">{{getItemTitle(item)}}</div>
<div class="form-vertical-container" *ngIf="isVertical(item)">
<div class="form-item-row">{{getItemTitle(item)}}</div>
<div class="form-item-row" [style.width]="getComponentWidth(item)">
<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore" [style.width]="getComponentWidth(item)">
</model-component-wrapper>
</div>
<div *ngIf="itemHasActions(item)" class="form-actions-table">
<div *ngFor="let actionItem of getActionComponents(item)" class="form-actions-cell" >
<model-component-wrapper [descriptor]="actionItem.descriptor" [modelStore]="modelStore">
</model-component-wrapper>
<div *ngIf="itemHasActions(item)" class="form-item-row form-actions-table form-item-last-row">
<div *ngFor="let actionItem of getActionComponents(item)" class="form-actions-cell" >
<model-component-wrapper [descriptor]="actionItem.descriptor" [modelStore]="modelStore">
</model-component-wrapper>
</div>
</div>
</div>
</ng-container>
</div>
</ng-container>
</div>
</ng-container>
@@ -118,12 +118,12 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
private getFormWidth(item: FormItem): string {
let itemConfig = item.config;
return itemConfig && itemConfig.width ? +itemConfig.width + 'px' : '400px';
return itemConfig && itemConfig.width ? +itemConfig.width + 'px' : '100%';
}
private getComponentWidth(item: FormItem): string {
let itemConfig = item.config;
return itemConfig ? itemConfig.componentWidth + 'px' : '';
return (itemConfig && itemConfig.componentWidth) ? itemConfig.componentWidth + 'px' : '';
}
private getItemTitle(item: FormItem): string {