diff --git a/projects/common/ui-elements/drop-list/drop-list.component.ts b/projects/common/ui-elements/drop-list/drop-list.component.ts
index 1d8daba50ee037906d5e8f6d10eff1dde0cc9f59..86e257258c935edcca761b951b7a72366d4e576c 100644
--- a/projects/common/ui-elements/drop-list/drop-list.component.ts
+++ b/projects/common/ui-elements/drop-list/drop-list.component.ts
@@ -35,6 +35,8 @@ import { DragNDropValueObject } from '../../models/uI-element';
            (cdkDropListDropped)="drop($event)">
         <ng-container *ngFor="let value of $any(elementModel.value)">
           <div class="item" *ngIf="!value.imgSrcValue" cdkDrag
+               [ngClass]="{ 'vertical-orientation' : elementModel.orientation === 'vertical',
+                            'horizontal-orientation' : elementModel.orientation === 'horizontal'}"
                [style.background-color]="elementModel.itemBackgroundColor"
                (cdkDragStarted)=dragStart() (cdkDragEnded)="dragEnd()">
             <div *cdkDragPreview
@@ -64,7 +66,8 @@ import { DragNDropValueObject } from '../../models/uI-element';
     '.item {border-radius: 10px; padding: 10px;}',
     '.item {cursor: grab}',
     '.item:active {cursor: grabbing}',
-    '.item:not(:last-child) {margin-bottom: 5px;}',
+    '.vertical-orientation.item:not(:last-child) {margin-bottom: 5px;}',
+    '.horizontal-orientation.item:not(:last-child) {margin-right: 5px}',
     '.error-message {font-size: 75%; margin-top: 10px;}',
     '.cdk-drag-preview {padding: 8px 20px; border-radius: 10px}',
     '.drag-placeholder {background-color: lightgrey; border: dotted 3px #999; padding: 10px;}',