diff --git a/projects/common/components/input-elements/drop-list.component.ts b/projects/common/components/input-elements/drop-list.component.ts index d6ba8875a111a61322ae6cf94cb8249a3b2e4f8e..7c9f07a59bf424f6b225983058768d1c3367c4dd 100644 --- a/projects/common/components/input-elements/drop-list.component.ts +++ b/projects/common/components/input-elements/drop-list.component.ts @@ -13,10 +13,11 @@ import { FormElementComponent } from '../../directives/form-element-component.di <div class="list" [id]="elementModel.id" [fxLayout]="elementModel.orientation | droplistLayout" [fxLayoutAlign]="elementModel.orientation | droplistLayoutAlign" - [ngClass]="{ 'vertical-orientation' : elementModel.orientation === 'vertical', - 'horizontal-orientation' : elementModel.orientation === 'horizontal', - 'clozeContext': clozeContext}" - [style.min-height.px]="elementModel.position?.useMinHeight ? elementModel.height : undefined" + [class.vertical-orientation] = "elementModel.orientation === 'vertical'" + [class.horizontal-orientation] = "elementModel.orientation === 'horizontal'" + [class.cloze-context] = "clozeContext" + [class.only-one-item]= "elementModel.onlyOneItem" + [style.min-height.px]="elementModel.position?.useMinHeight || clozeContext ? elementModel.height : undefined" [style.color]="elementModel.styling.fontColor" [style.font-family]="elementModel.styling.font" [style.font-size.px]="elementModel.styling.fontSize" @@ -32,9 +33,18 @@ import { FormElementComponent } from '../../directives/form-element-component.di (focusout)="elementFormControl.markAsTouched()" (drop)="drop($event)" (dragenter)="dragEnterList($event)" (dragleave)="dragLeaveList($event)" (dragover)="$event.preventDefault()"> + <!--Add dummy div - otherwise the empty list in cloze context will not be in one line--> + <div *ngIf="viewModel.length === 0" + [style.min-height.px]="elementModel.height - 4" + fxLayout="row" + [fxLayoutAlign]="'center center'"> + <span> </span> + </div> <ng-container *ngFor="let dropListValueElement of viewModel let index = index;"> <div *ngIf="!dropListValueElement.imgSrc" class="list-item" + fxLayout="row" + [fxLayoutAlign]="elementModel.onlyOneItem ? 'center center' : 'none'" draggable="true" (dragstart)="dragStart($event, dropListValueElement, index)" (dragend)="dragEnd($event)" (dragenter)="dragEnterItem($event)" @@ -65,8 +75,10 @@ import { FormElementComponent } from '../../directives/form-element-component.di '.list {width: 100%; height: 100%; background-color: rgb(244, 244, 242); border-radius: 5px;}', '.list {padding: 2px;}', '.list-item {border-radius: 5px;}', - ':not(.clozeContext) .list-item {padding: 10px;}', - '.clozeContext .list-item {padding: 0 5px; text-align: center; line-height: 130%;}', + ':not(.cloze-context) .list-item {padding: 10px;}', + '.cloze-context .list-item {padding: 0 5px; text-align: center; line-height: 1.2;}', + '.only-one-item .list-item {padding: 0 !important; line-height: 1.2; text-align: center;}', + '.only-one-item .list-item {height: 100%; min-height: 100%; min-width: 100%; width: 100%;}', 'img.list-item {align-self: start; padding: 2px !important;}', '.vertical-orientation .list-item:not(:last-child) {margin-bottom: 5px;}', '.horizontal-orientation .list-item:not(:last-child) {margin-right: 5px;}',