Fix choices display

ch4mpy · Mar 21, 2024 · 4008d22 · 4008d22
1 parent 94f9a74
commit 4008d22
Showing 1 changed file with 23 additions and 18 deletions.
diff --git a/angular-ui/projects/quiz/src/app/choice-item.component.ts b/angular-ui/projects/quiz/src/app/choice-item.component.ts
@@ -20,23 +20,26 @@ export interface ChoiceEvent {
 
 @Component({
   selector: 'app-choice-item',
-  template: `<form [formGroup]="form" style="height: 4em;">
-      <mat-form-field style="width: 75%;">
-        <mat-label>Label</mat-label>
-        <input matInput formControlName="label" />
-      </mat-form-field>
-      <mat-checkbox formControlName="isGood"></mat-checkbox>
-      <mat-icon
-        *ngIf="(isValidated$ | async) && isCorrect && isPerQuestionResult"
-        color="primary"
-        >done</mat-icon
-      >
-      <mat-icon
-        *ngIf="(isValidated$ | async) && !isCorrect && isPerQuestionResult"
-        color="warn"
-        >close</mat-icon
-      >
-    </form>
+  template: `<div style="height: 4em; width: 100%; display: flex;">
+    <span style="width: 100%; margin-right: 4em;">
+      <form [formGroup]="form">
+        <mat-form-field style="width: 100%">
+          <mat-label>Label</mat-label>
+          <input matInput formControlName="label" />
+        </mat-form-field>
+        <mat-checkbox formControlName="isGood"></mat-checkbox>
+        <mat-icon
+          *ngIf="(isValidated$ | async) && isCorrect && isPerQuestionResult"
+          color="primary"
+          >done</mat-icon
+        >
+        <mat-icon
+          *ngIf="(isValidated$ | async) && !isCorrect && isPerQuestionResult"
+          color="warn"
+          >close</mat-icon
+        >
+      </form>
+    </span>
     <button
       *ngIf="isInEditMode$ | async"
       matListItemMeta
@@ -48,7 +51,9 @@ export interface ChoiceEvent {
       (click)="delete()"
     >
       <mat-icon>delete</mat-icon>
-    </button>`,
+    </button>
+    <span style="width: 8em;"></span>
+  </div>`,
   styles: [],
 })
 export class ChoiceItemComponent implements OnInit, OnDestroy {