Improve styling of cloze sub-elements

The issue here is the alignment if dropLists and text fields. They are 
supposed to be exactly in line with the text which is very complicated 
with Material components, which are heavily nested and contain several 
sub-elements which need to be changed - removing margins, paddings and 
other position related styles.

projects/common/element-components/compound-elements/cloze.component.ts

@@ -55,15 +55,15 @@ import { FormElementComponent } from '../../form-element-component.directive';
           </app-dropdown>
           <app-text-field *ngIf="part.type === 'text-field'" #textfieldComponent
                           [parentForm]="parentForm"
-                          [style.vertical-align]="'sub'"
                           [style.display]="'inline-block'"
                           [style.pointerEvents]="allowClickThrough ? 'auto' : 'none'"
                           [elementModel]="$any(part.value)"
                           (elementValueChanged)="elementValueChanged.emit($event)">
           </app-text-field>
-          <div *ngIf="part.type === 'drop-list'" [style.display]="'inline-block'"
-               [style.vertical-align]="'middle'"
+          <div *ngIf="part.type === 'drop-list'"
+               [style.display]="'inline-block'"
                [style.pointerEvents]="allowClickThrough ? 'auto' : 'none'"
+               [style.vertical-align]="'middle'"
                [style.width.px]="$any(part.value).width"
                [style.height.px]="$any(part.value).height">
             <app-drop-list #droplistComponent
@@ -77,7 +77,11 @@ import { FormElementComponent } from '../../form-element-component.directive';
     </p>
   `,
   styles: [
-    ':host ::ng-deep app-text-field .mat-form-field-wrapper {padding-bottom: 0; margin: 0}',
+    ':host ::ng-deep app-text-field {vertical-align: middle}',
+    ':host ::ng-deep app-text-field .mat-form-field-wrapper {height: 100%; padding-bottom: 0; margin: 0}',
+    ':host ::ng-deep app-text-field .mat-form-field {height: 100%}',
+    ':host ::ng-deep app-text-field .mat-form-field-flex {height: 100%}',
+    ':host ::ng-deep app-drop-list {vertical-align: middle}',
     ':host ::ng-deep app-drop-list .cdk-drop-list {height: 100%; width: 100%;}',
     ':host ::ng-deep app-drop-list .item {padding: 0 10px; height: 30px; line-height: 30px; text-align: center;}',
     'p {margin: 0}'

projects/common/element-components/text-field.component.ts

@@ -67,7 +67,7 @@ import { TextFieldElement } from '../models/text-field-element';
     </mat-form-field>
   `,
   styles: [
-    '::ng-deep app-text-field .small-input div.mat-form-field-infix {border-top: none; padding: 0.75em 0 0.25em 0;}'
+    '::ng-deep app-text-field .small-input div.mat-form-field-infix {border-top: none; padding: 0.55em 0 0.25em 0;}'
   ]
 })
 export class TextFieldComponent extends FormElementComponent {

projects/common/models/compound-elements/cloze-element.ts

@@ -14,7 +14,7 @@ import { initFontElement } from '../../util/unit-interface-initializer';
 // TODO styles like em dont continue after inserted components
 
 export class ClozeElement extends CompoundElement implements FontElement {
-  text: string = '<p>Lorem ipsum dolor \\z</p>';
+  text: string = '<p>Lorem ipsum dolor \\z sdfsdf \\i sdfsdf</p>';
 
   parts: ClozePart[][] = [];
   childElements: InputElement[] = [];
@@ -131,6 +131,7 @@ export class ClozeElement extends CompoundElement implements FontElement {
         newElement = new DropListElement(elementModel);
         newElement.height = 30;
         newElement.width = 100;
+        newElement.onlyOneItem = true;
         break;
       default:
         throw new Error(`ElementType ${elementModel.type} not found!`);