diff --git a/projects/common/element-components/compound-elements/cloze.component.ts b/projects/common/element-components/compound-elements/cloze.component.ts index d4369e5dcb55defb1e167a36d547fa3602349418..5063ae977d120328d05777f205581b48496876c9 100644 --- a/projects/common/element-components/compound-elements/cloze.component.ts +++ b/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}' diff --git a/projects/common/element-components/text-field.component.ts b/projects/common/element-components/text-field.component.ts index 23099218a25719a157cae348f76866002f905d55..176fc1c56c86b1bb0c8b6cef7ca1bbe3f6dfa6e6 100644 --- a/projects/common/element-components/text-field.component.ts +++ b/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 { diff --git a/projects/common/models/compound-elements/cloze-element.ts b/projects/common/models/compound-elements/cloze-element.ts index 34225caa9cb664613d49efa1763b2f81df7ce2d1..3d07b92f77c40669f45a8fdb3896d75059fd4f96 100644 --- a/projects/common/models/compound-elements/cloze-element.ts +++ b/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!`);