Merge pull request #180 from sneaker102/master

Let input container to take full width

Author: aeberhart

projects/dashjoin/json-schema-form/src/lib/array/array.component.css

@@ -0,0 +1,3 @@
+.full-width {
+  flex-basis: 100%;
+}

projects/dashjoin/json-schema-form/src/lib/array/array.component.html

@@ -1,6 +1,6 @@
 <div
     [ngStyle]="{display:'flex', 'flex-wrap': 'wrap', 'flex-direction': this.state.schema.layout === 'vertical' ? 'column':'row'}">
-    <div *ngFor="let s of states; let i = index" (mouseenter)="hover=i" (mouseleave)="hover=null">
+    <div *ngFor="let s of states; let i = index" (mouseenter)="hover=i" (mouseleave)="hover=null" [class.full-width]="this.state.schema.layout === 'vertical'">
         <app-wrapper [state]="s"></app-wrapper>
         <button mat-icon-button (click)="remove(i)" [style.visibility]="i===hover ? 'visible' : 'hidden'">
             <mat-icon>remove_circle_outline</mat-icon>
@@ -9,4 +9,4 @@
     <button mat-icon-button (click)=" add()">
         <mat-icon>add_circle_outline</mat-icon>
     </button>
-</div>
+</div>

projects/dashjoin/json-schema-form/src/lib/object/object.component.css

@@ -0,0 +1,3 @@
+.full-width {
+  flex-basis: 100%;
+}

projects/dashjoin/json-schema-form/src/lib/object/object.component.html

@@ -1,21 +1,21 @@
 <div *ngIf="!state.schema.order"
     [ngStyle]="{display:'flex', 'flex-wrap': 'wrap', 'flex-direction': this.state.schema.layout === 'vertical' ? 'column':'row'}">
-    <div *ngFor="let s of states; let i = index">
+    <div *ngFor="let s of states; let i = index" [class.full-width]="this.state.schema.layout === 'vertical'">
         <app-wrapper *ngIf="show(i)" [state]="s"></app-wrapper>
         &nbsp;
     </div>
 </div>
 <div *ngIf="state.schema.order"
     [ngStyle]="{display:'flex', 'flex-wrap': 'wrap', 'flex-direction': this.state.schema.layout === 'vertical' ? 'column':'row'}">
-    <div *ngFor="let o of this.state.schema.order">
+    <div *ngFor="let o of this.state.schema.order" [class.full-width]="this.state.schema.layout === 'vertical'">
         <app-wrapper *ngIf="getState(o)" [state]="getState(o)!"></app-wrapper>
         <div
             [ngStyle]="{display:'flex', 'flex-wrap': 'wrap', 'flex-direction': this.state.schema.layout === 'vertical' ? 'row':'column'}">
-            <div *ngFor="let oo of getArray(o)">
+            <div *ngFor="let oo of getArray(o)" [class.full-width]="this.state.schema.layout === 'vertical'">
                 <app-wrapper [state]="getState(oo)!"></app-wrapper>
                 &nbsp;
             </div>
         </div>
         &nbsp;
     </div>
-</div>
+</div>