Refactor radio group image

Improve general structure. Image situation still bad.

projects/common/element-components/compound-elements/radio-group-images.component.ts

@@ -5,9 +5,10 @@ import { FormElementComponent } from '../../form-element-component.directive';
 @Component({
   selector: 'app-radio-group-images',
   template: `
-    <div class="mat-form-field"
-         [style.width.%]="100"
+    <div [style.width.%]="100"
          [style.height.%]="100"
+         [style.display]="'grid'"
+         [style.grid-template-columns]="'1fr '.repeat(elementModel.columns.length)"
          [style.background-color]="elementModel.backgroundColor"
          [style.color]="elementModel.fontColor"
          [style.font-family]="elementModel.font"
@@ -15,35 +16,43 @@ import { FormElementComponent } from '../../form-element-component.directive';
          [style.font-weight]="elementModel.bold ? 'bold' : ''"
          [style.font-style]="elementModel.italic ? 'italic' : ''"
          [style.text-decoration]="elementModel.underline ? 'underline' : ''">
-      <label id="radio-group-label" class="white-space-break"
+      <label id="radio-group-label" class="label"
+             [style.grid-column-start]="1"
+             [style.grid-column-end]="2 + elementModel.columns.length"
+             [style.grid-row-start]="1"
+             [style.grid-row-end]="2"
              [innerHTML]="elementModel.label">
       </label>
-      <mat-radio-group aria-labelledby="radio-group-label" [formControl]="elementFormControl"
-                       class="grid-layout" [style.display]="'grid'"
-                       [value]="elementModel.value"
-                       [style.grid-template-columns]="'1fr '.repeat(elementModel.columns.length)">
-        <label *ngFor="let option of elementModel.columns; let i = index" class="columns"
-               id="radio-group-label"
-               fxLayout="column"
-               [style.grid-column-start]="1 + i"
-               [style.grid-column-end]="2 + i"
-               [style.grid-row-start]="1"
-               [style.grid-row-end]="2"
-               (click)="selectOption(i)">
-          <img *ngIf="option.imgSrc && option.position === 'above'"
-               [src]="option.imgSrc | safeResourceUrl" alt="Image Placeholder">
-          <div>{{option.text}}</div>
-          <img *ngIf="option.imgSrc && option.position === 'below'"
-               [src]="option.imgSrc | safeResourceUrl" alt="Image Placeholder">
-        </label>
+      <div *ngFor="let option of elementModel.columns; let i = index"
+           class="columns" fxLayout="column"
+           [style.grid-column-start]="1 + i"
+           [style.grid-column-end]="2 + i"
+           [style.grid-row-start]="2"
+           [style.grid-row-end]="3"
+           (click)="selectOption(i)">
+        <img *ngIf="option.imgSrc && option.position === 'above'"
+             [src]="option.imgSrc | safeResourceUrl" alt="Image Placeholder">
+        <div>{{option.text}}</div>
+        <img *ngIf="option.imgSrc && option.position === 'below'"
+             [src]="option.imgSrc | safeResourceUrl" alt="Image Placeholder">
+      </div>
+      <mat-radio-group aria-labelledby="radio-group-label"
+                       [formControl]="elementFormControl"
+                       [style.display]="'grid'"
+                       [style.grid-template-columns]="'1fr '.repeat(elementModel.columns.length)"
+                       [style.grid-column-start]="1"
+                       [style.grid-column-end]="2 + elementModel.columns.length"
+                       [style.grid-row-start]="3"
+                       [style.grid-row-end]="4"
+                       [value]="elementModel.value">
         <mat-radio-button *ngFor="let option of elementModel.columns; let i = index"
                           aria-labelledby="radio-group-label"
                           [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'"
                           [value]="i"
                           [style.grid-column-start]="1 + i"
                           [style.grid-column-end]="2 + i"
-                          [style.grid-row-start]="2"
-                          [style.grid-row-end]="3">
+                          [style.grid-row-start]="1"
+                          [style.grid-row-end]="2">
         </mat-radio-button>
       </mat-radio-group>
       <mat-error *ngIf="elementFormControl.errors && elementFormControl.touched"
@@ -53,9 +62,9 @@ import { FormElementComponent } from '../../form-element-component.directive';
     </div>
   `,
   styles: [
-    '.grid-layout .columns {text-align: center; margin: 0 5px;}',
-    '.grid-layout .columns img {height: 100%; object-fit: none; cursor: pointer;}',
-    '::ng-deep app-radio-group-images .grid-layout mat-radio-button span.mat-radio-container {left: calc(50% - 10px)}',
+    '.columns {text-align: center; margin: 0 5px;}',
+    // '.grid-layout .columns img {height: 100%; object-fit: none; cursor: pointer;}',
+    '::ng-deep app-radio-group-images mat-radio-button span.mat-radio-container {left: calc(50% - 10px)}',
     'mat-radio-group {margin-top: 10px}',
     '.error-message { font-size: 75% }',
     '.grid-layout mat-radio-button {margin-top: 15px}'