Fix the vertical alignment for all child elements of cloze texts

- When the height of the child elements of a cloze element is increased,
they all now grow out of their center

docs/release-notes-editor.md

@@ -3,6 +3,8 @@ Editor
 ##1.35.2
 ### Verbesserungen
 - Wendet die Eigenschaft "Schreibgeschützt" auf Formel Elemente an
+- Vereinheitlicht das Verhalten von Kindelementen von Lückentexten bei Änderung ihrer Höhe
+- Auswahllisten, die nur ein Element zulassen, werden von diesem Element komplett ausgefüllt 
 
 ## 1.35.1
 

docs/release-notes-player.md

@@ -4,6 +4,7 @@ Player
 ## 1.28.2
 ### Verbesserungen 
 - Ermöglicht die Interaktion mit Elementen, die sich hinter einem Rahmenelement befinden
+- Vereinheitlicht die vertikale Ausrichtung von Kindelementen von Lückentexten
 
 ### Fehlerbehebungen
 - Behebt Fehler beim Hochladen von Aufgaben mit HTML-Sonderzeichen ins Testcenter
@@ -12,6 +13,7 @@ Player
 ### Verbesserungen
 - Darstellung und Verhalten der Warnmeldung von Formelelementen
   verhalten sich analog zu anderen Elementen
+- Korrigiert die vertikale Ausrichtung von Ablegelisten in Lückentexten
 
 ### Fehlerbehebungen
 - Behebt das versehentliche Löschen von Text beim Entfernen von 

projects/common/components/button/button.component.ts

@@ -8,26 +8,29 @@ import { ElementComponent } from '../../directives/element-component.directive';
 @Component({
   selector: 'aspect-button',
   template: `
-    <a *ngIf="!elementModel.imageSrc && elementModel.asLink"
-       href="{{elementModel.action+'-'+elementModel.actionParam}}"
-       [style.width.%]="100"
-       [style.height.%]="100"
-       [style.background-color]="elementModel.styling.backgroundColor"
-       [style.color]="elementModel.styling.fontColor"
-       [style.font-family]="elementModel.styling.font"
-       [style.font-size.px]="elementModel.styling.fontSize"
-       [style.font-weight]="elementModel.styling.bold ? 'bold' : ''"
-       [style.font-style]="elementModel.styling.italic ? 'italic' : ''"
-       [style.text-decoration]="elementModel.styling.underline ? 'underline' : ''"
-       [style.border-radius.px]="elementModel.styling.borderRadius"
-       (click)="$event.preventDefault(); elementModel.action && elementModel.actionParam !== null ?
-                                           navigateTo.emit({
-                                              action: elementModel.action,
-                                              param: elementModel.actionParam
-                                           }) : false">
-      <!--preventDefault to prevent form submission-->
-      {{elementModel.label}}
-    </a>
+    <div *ngIf="!elementModel.imageSrc && elementModel.asLink"
+         [style.width.%]="100"
+         [style.height.%]="100"
+         fxLayout="column"
+         fxLayoutAlign="center stretch">
+      <a href="{{elementModel.action+'-'+elementModel.actionParam}}"
+         [style.background-color]="elementModel.styling.backgroundColor"
+         [style.color]="elementModel.styling.fontColor"
+         [style.font-family]="elementModel.styling.font"
+         [style.font-size.px]="elementModel.styling.fontSize"
+         [style.font-weight]="elementModel.styling.bold ? 'bold' : ''"
+         [style.font-style]="elementModel.styling.italic ? 'italic' : ''"
+         [style.text-decoration]="elementModel.styling.underline ? 'underline' : ''"
+         [style.border-radius.px]="elementModel.styling.borderRadius"
+         (click)="$event.preventDefault(); elementModel.action && elementModel.actionParam !== null ?
+                                             navigateTo.emit({
+                                                action: elementModel.action,
+                                                param: elementModel.actionParam
+                                             }) : false">
+        <!--preventDefault to prevent form submission-->
+        {{elementModel.label}}
+      </a>
+    </div>
     <button *ngIf="!elementModel.imageSrc && !elementModel.asLink" mat-button
             type='button'
             [style.width.%]="100"

projects/common/components/compound-elements/cloze/cloze-child-elements/text-field-simple.component.ts

@@ -37,8 +37,8 @@ import { TextInputComponent } from 'common/directives/text-input-component.direc
            (blur)="focusChanged.emit({ inputElement: input, focused: false })">
   `,
   styles: [
-    '.clozeChild {border: 1px solid rgba(0,0,0,.12); border-radius: 5px}',
-    'input {width: calc(100% - 2px); height: calc(100% - 2px); vertical-align: top; padding: 0;}',
+    '.clozeChild {border: 1px solid rgba(0,0,0,.12); border-radius: 4px}',
+    'input {width: calc(100% - 2px); height: calc(100% - 2px); padding: 0 0 1px 0;}',
     'input:hover {border: 1px solid currentColor;}',
     'input:focus {outline: 1px solid #3f51b5;}',
     '.errors {border: 2px solid #f44336 !important;}'

projects/common/components/compound-elements/cloze/cloze-child-elements/toggle-button.component.ts

@@ -7,6 +7,7 @@ import { ToggleButtonElement } from 'common/models/elements/compound-elements/cl
   template: `
     <mat-button-toggle-group [class.errors]="elementFormControl.errors && elementFormControl.touched"
                              [formControl]="elementFormControl"
+                             [style.height.px]="elementModel.height"
                              [isDisabled]="elementModel.readOnly"
                              [value]="elementModel.value"
                              [vertical]="elementModel.verticalOrientation"
@@ -41,8 +42,9 @@ import { ToggleButtonElement } from 'common/models/elements/compound-elements/cl
   styles: [
     '.errors {border: 2px solid #f44336 !important;}',
     'mat-button-toggle-group {display: inline-flex; min-width: 70px; min-height: 20px; max-width: 100%;}',
-    'mat-button-toggle-group {justify-content: center;}',
+    'mat-button-toggle-group {justify-content: center; box-sizing: border-box;}',
     ':host ::ng-deep .mat-button-toggle-label-content {line-height: unset}',
+    ':host ::ng-deep .mat-button-toggle-button {height: 100%}',
     ':host ::ng-deep .strike-selected-option.mat-button-toggle-checked .mat-button-toggle-label-content' +
     '{text-decoration: line-through}',
     ':host ::ng-deep .strike-other-options:not(.mat-button-toggle-checked) .mat-button-toggle-label-content' +

projects/common/components/compound-elements/cloze/compound-child-overlay.component.ts

@@ -14,6 +14,7 @@ import { ValueChangeElement } from 'common/models/elements/element';
   selector: 'aspect-compound-child-overlay',
   template: `
     <div [style.border]="isSelected ? 'purple solid 1px' : ''"
+
          (click)="elementSelected.emit(this); $event.stopPropagation();">
       <aspect-text-field-simple *ngIf="element.type === 'text-field-simple'" #childComponent
                                 [style.pointer-events]="editorMode ? 'none' : 'auto'"