diff --git a/projects/common/components/compound-elements/cloze/cloze-child-elements/drop-list-simple.component.ts b/projects/common/components/compound-elements/cloze/cloze-child-elements/drop-list-simple.component.ts index f88193120ee4d0db493f9231d035c2d492a0cdbc..5cd18204f0d55e40d61ff45724836dbfd79035ba 100644 --- a/projects/common/components/compound-elements/cloze/cloze-child-elements/drop-list-simple.component.ts +++ b/projects/common/components/compound-elements/cloze/cloze-child-elements/drop-list-simple.component.ts @@ -64,7 +64,8 @@ import { DropListComponent } from 'common/components/input-elements/drop-list.co {{value.text}} </div> <div class="drag-placeholder" *cdkDragPlaceholder - [style.height.%]="placeholderHeight"> + [style.height.%]="placeholderHeight" + [style.width.%]="placeholderWidth"> </div> {{value.text}} </div> @@ -92,11 +93,12 @@ import { DropListComponent } from 'common/components/input-elements/drop-list.co export class DropListSimpleComponent extends FormElementComponent { @Input() elementModel!: DropListSimpleElement; placeholderHeight: number = 1; + placeholderWidth: number = 1; bodyElement: HTMLElement = document.body; dragStart(event: CdkDragStart<DropListSimpleComponent>): void { - this.setPlaceholderHeight( + this.setPlaceholderDimensions( event.source.dropContainer.data.elementFormControl.value.length - 1, event.source.dropContainer.data.elementModel.orientation ); @@ -139,13 +141,14 @@ export class DropListSimpleComponent extends FormElementComponent { const presentValueIDs = event.container.data.elementFormControl.value .map((value: DragNDropValueObject) => value.id); const itemCountOffset = presentValueIDs.includes(event.item.data.element.id) ? 1 : 0; - this.setPlaceholderHeight( + this.setPlaceholderDimensions( presentValueIDs.length - itemCountOffset, event.container.data.elementModel.orientation); } - setPlaceholderHeight(itemsCount: number, orientation: unknown): void { + setPlaceholderDimensions(itemsCount: number, orientation: unknown): void { this.placeholderHeight = itemsCount && orientation !== 'horizontal' ? 1 : 100; + this.placeholderWidth = itemsCount && orientation !== 'vertical' ? 1 : 100; } onlyOneItemPredicate = (drag: CdkDrag, drop: CdkDropList): boolean => ( diff --git a/projects/common/components/input-elements/drop-list.component.ts b/projects/common/components/input-elements/drop-list.component.ts index d35af9a5016f2a62d177620d75e8966967b128a4..38a410e68c0f94581fb7ad6b7e6946540caeebb0 100644 --- a/projects/common/components/input-elements/drop-list.component.ts +++ b/projects/common/components/input-elements/drop-list.component.ts @@ -75,7 +75,8 @@ import { FormElementComponent } from '../../directives/form-element-component.di {{dropListValueElement.text}} </div> <div class="drag-placeholder" *cdkDragPlaceholder - [style.height.%]="placeholderHeight"> + [style.height.%]="placeholderHeight" + [style.width.%]="placeholderWidth"> </div> {{dropListValueElement.text}} </div> @@ -142,9 +143,10 @@ export class DropListComponent extends FormElementComponent { bodyElement: HTMLElement = document.body; draggedItemIndex: number | null = null; placeholderHeight: number = 1; + placeholderWidth: number = 1; dragStart(itemIndex: number, event: CdkDragStart<DropListSimpleComponent>): void { - this.setPlaceholderHeight( + this.setPlaceholderDimensions( event.source.dropContainer.data.elementFormControl.value.length - 1, event.source.dropContainer.data.elementModel.orientation ); @@ -190,13 +192,14 @@ export class DropListComponent extends FormElementComponent { const presentValueIDs = event.container.data.elementFormControl.value .map((value: DragNDropValueObject) => value.id); const itemCountOffset = presentValueIDs.includes(event.item.data.element.id) ? 1 : 0; - this.setPlaceholderHeight( + this.setPlaceholderDimensions( presentValueIDs.length - itemCountOffset, event.container.data.elementModel.orientation); } - setPlaceholderHeight(itemsCount: number, orientation: unknown): void { + setPlaceholderDimensions(itemsCount: number, orientation: unknown): void { this.placeholderHeight = itemsCount && orientation !== 'horizontal' ? 1 : 100; + this.placeholderWidth = itemsCount && orientation !== 'vertical' ? 1 : 100; } onlyOneItemPredicate = (drag: CdkDrag, drop: CdkDropList): boolean => (