diff --git a/projects/common/assets/styles.css b/projects/common/assets/styles.css
index 14eaa4277e18dfd1446e458cbd73687691274b8f..83b0c8ca4fa0f4dbacd5f0838d917b51d7496fb9 100644
--- a/projects/common/assets/styles.css
+++ b/projects/common/assets/styles.css
@@ -48,8 +48,11 @@ blockquote p {
   display: inline;
 }
 
-.element-content-wrapper {
+.fixed-size-content-wrapper {
   display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   height: 100%;
 }
diff --git a/projects/common/ui-elements/audio/audio.component.ts b/projects/common/ui-elements/audio/audio.component.ts
index 767c8eb6b4541190e9a78269612d9e8c81aaab79..353657bf4f3aa69ce1aaf6d61d17a7b6bfb9da5d 100644
--- a/projects/common/ui-elements/audio/audio.component.ts
+++ b/projects/common/ui-elements/audio/audio.component.ts
@@ -5,27 +5,25 @@ import { MediaPlayerElementComponent } from '../../directives/media-player-eleme
 @Component({
   selector: 'aspect-audio',
   template: `
-    <div class="element-content-wrapper">
-      <div [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
-           [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
-           [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+    <div [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+         [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
+         [class.center-content]="elementModel.positionProps.dynamicPositioning &&
                                       elementModel.positionProps.fixedSize">
-        <audio #player
-               (playing)="onMediaPlayStatusChanged.emit(this.elementModel.id)"
-               (pause)="onMediaPlayStatusChanged.emit(null)"
-               [style.width.%]="100"
-               [src]="elementModel.src | safeResourceUrl">
-        </audio>
-        <aspect-control-bar [player]="player"
-                            [project]="project"
-                            [id]="elementModel.id"
-                            [playerProperties]="elementModel.playerProps"
-                            [active]="active"
-                            [dependencyDissolved]="dependencyDissolved"
-                            (onMediaValidStatusChanged)="onMediaValidStatusChanged.emit($event)"
-                            (elementValueChanged)="elementValueChanged.emit($event)">
-        </aspect-control-bar>
-      </div>
+      <audio #player
+             (playing)="onMediaPlayStatusChanged.emit(this.elementModel.id)"
+             (pause)="onMediaPlayStatusChanged.emit(null)"
+             [style.width.%]="100"
+             [src]="elementModel.src | safeResourceUrl">
+      </audio>
+      <aspect-control-bar [player]="player"
+                          [project]="project"
+                          [id]="elementModel.id"
+                          [playerProperties]="elementModel.playerProps"
+                          [active]="active"
+                          [dependencyDissolved]="dependencyDissolved"
+                          (onMediaValidStatusChanged)="onMediaValidStatusChanged.emit($event)"
+                          (elementValueChanged)="elementValueChanged.emit($event)">
+      </aspect-control-bar>
     </div>
   `
 })
diff --git a/projects/common/ui-elements/button/button.component.ts b/projects/common/ui-elements/button/button.component.ts
index f626bed06af14a8b3a9506e7d3d3f3141dba8793..da904596e43618fefb4c4541fa20f0bd1587a940 100644
--- a/projects/common/ui-elements/button/button.component.ts
+++ b/projects/common/ui-elements/button/button.component.ts
@@ -7,36 +7,34 @@ import { ButtonElement } from './button-element';
 @Component({
   selector: 'aspect-button',
   template: `
-    <div class="element-content-wrapper">
-      <button *ngIf="!elementModel.imageSrc" mat-button
-              type='button'
-              [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+    <button *ngIf="!elementModel.imageSrc" mat-button
+            type='button'
+            [class.center-content]="elementModel.positionProps.dynamicPositioning &&
                                       elementModel.positionProps.fixedSize"
-              [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
-              [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
-              [style.background-color]="elementModel.surfaceProps.backgroundColor"
-              [style.color]="elementModel.fontProps.fontColor"
-              [style.font-family]="elementModel.fontProps.font"
-              [style.font-size.px]="elementModel.fontProps.fontSize"
-              [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
-              [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
-              [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
-              [style.border-radius.px]="elementModel.borderRadius"
-              (click)="elementModel.action ? navigationRequested.emit(elementModel.action) : false">
-        {{elementModel.label}}
-      </button>
-      <input *ngIf="elementModel.imageSrc" type="image"
-             [src]="elementModel.imageSrc | safeResourceUrl"
-             [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+            [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+            [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
+            [style.background-color]="elementModel.surfaceProps.backgroundColor"
+            [style.color]="elementModel.fontProps.fontColor"
+            [style.font-family]="elementModel.fontProps.font"
+            [style.font-size.px]="elementModel.fontProps.fontSize"
+            [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+            [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+            [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
+            [style.border-radius.px]="elementModel.borderRadius"
+            (click)="elementModel.action ? navigationRequested.emit(elementModel.action) : false">
+      {{elementModel.label}}
+    </button>
+    <input *ngIf="elementModel.imageSrc" type="image"
+           [src]="elementModel.imageSrc | safeResourceUrl"
+           [class.center-content]="elementModel.positionProps.dynamicPositioning &&
                                       elementModel.positionProps.fixedSize"
-             [class.fixed-size-dynamic-image]="elementModel.positionProps.dynamicPositioning &&
+           [class.fixed-size-dynamic-image]="elementModel.positionProps.dynamicPositioning &&
                                       elementModel.positionProps.fixedSize"
-             [class]="elementModel.positionProps.dynamicPositioning ? 'dynamic-image' : 'static-image'"
-             [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : null"
-             [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : null"
-             [alt]="'imageNotFound' | translate"
-             (click)="elementModel.action ? navigationRequested.emit(elementModel.action) : false">
-    </div>
+           [class]="elementModel.positionProps.dynamicPositioning ? 'dynamic-image' : 'static-image'"
+           [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : null"
+           [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : null"
+           [alt]="'imageNotFound' | translate"
+           (click)="elementModel.action ? navigationRequested.emit(elementModel.action) : false">
   `,
   styles: [
     '.dynamic-image {width: 100%; height: fit-content;}',
diff --git a/projects/common/ui-elements/checkbox/checkbox.component.ts b/projects/common/ui-elements/checkbox/checkbox.component.ts
index c9bb53122a6a4d2118597a5ef5edd9702e52627f..0c609cce6ff0d4152b8f6605ea43205031d08cda 100644
--- a/projects/common/ui-elements/checkbox/checkbox.component.ts
+++ b/projects/common/ui-elements/checkbox/checkbox.component.ts
@@ -6,30 +6,28 @@ import { CheckboxElement } from './checkbox-element';
 @Component({
   selector: 'aspect-checkbox',
   template: `
-    <div class="element-content-wrapper">
-      <div class="mat-form-field"
-           [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
-           [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
-           [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+    <div class="mat-form-field"
+         [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+         [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
+         [class.center-content]="elementModel.positionProps.dynamicPositioning &&
                                     elementModel.positionProps.fixedSize"
-           [style.background-color]="elementModel.surfaceProps.backgroundColor">
-        <mat-checkbox #checkbox class="example-margin"
-                      [formControl]="elementFormControl"
-                      [checked]="$any(elementModel.value)"
-                      [style.color]="elementModel.fontProps.fontColor"
-                      [style.font-family]="elementModel.fontProps.font"
-                      [style.font-size.px]="elementModel.fontProps.fontSize"
-                      [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
-                      [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
-                      [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
-                      (click)="elementModel.readOnly ? $event.preventDefault() : null">
-          <div [style.line-height.%]="elementModel.lineHeight" [innerHTML]="elementModel.label"></div>
-        </mat-checkbox>
-        <mat-error *ngIf="elementFormControl.errors && elementFormControl.touched"
-                   class="error-message">
-          {{elementFormControl.errors | errorTransform: elementModel}}
-        </mat-error>
-      </div>
+         [style.background-color]="elementModel.surfaceProps.backgroundColor">
+      <mat-checkbox #checkbox class="example-margin"
+                    [formControl]="elementFormControl"
+                    [checked]="$any(elementModel.value)"
+                    [style.color]="elementModel.fontProps.fontColor"
+                    [style.font-family]="elementModel.fontProps.font"
+                    [style.font-size.px]="elementModel.fontProps.fontSize"
+                    [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+                    [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+                    [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
+                    (click)="elementModel.readOnly ? $event.preventDefault() : null">
+        <div [style.line-height.%]="elementModel.lineHeight" [innerHTML]="elementModel.label"></div>
+      </mat-checkbox>
+      <mat-error *ngIf="elementFormControl.errors && elementFormControl.touched"
+                 class="error-message">
+        {{elementFormControl.errors | errorTransform: elementModel}}
+      </mat-error>
     </div>
   `,
   styles: [
diff --git a/projects/common/ui-elements/cloze/cloze.component.ts b/projects/common/ui-elements/cloze/cloze.component.ts
index 9d7c10d283cfb2d5962cf1180b01a5fb3db31d6e..861e78d2865fd6fc74512312672c41df2a657eb5 100644
--- a/projects/common/ui-elements/cloze/cloze.component.ts
+++ b/projects/common/ui-elements/cloze/cloze.component.ts
@@ -13,40 +13,38 @@ import { ElementComponent } from '../../directives/element-component.directive';
     <ng-container *ngIf="elementModel.document.content.length == 0">
       Kein Dokument vorhanden
     </ng-container>
-    <div class="element-content-wrapper">
-      <div [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+    <div [class.center-content]="elementModel.positionProps.dynamicPositioning &&
                                    elementModel.positionProps.fixedSize"
-           [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
-           [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : 'auto'">
-        <ng-container *ngFor="let part of elementModel.document.content">
-          <ul *ngIf="part.type === 'bulletList'"
-              [style.font-size]="part.attrs.fontSize"
-              [style.list-style]="part.attrs.listStyle">
-            <li *ngFor="let listItem of part.content">
-              <ng-container *ngFor="let listItemPart of $any(listItem).content"
-                            [ngTemplateOutlet]="paragraphs"
-                            [ngTemplateOutletContext]="{ $implicit: listItemPart }"></ng-container>
-            </li>
-          </ul>
-          <ol *ngIf="part.type === 'orderedList'"
-              [style.font-size]="part.attrs.fontSize"
-              [style.list-style]="part.attrs.listStyle">
-            <li *ngFor="let listItem of part.content">
-              <ng-container *ngFor="let listItemPart of $any(listItem).content"
-                            [ngTemplateOutlet]="paragraphs"
-                            [ngTemplateOutletContext]="{ $implicit: listItemPart }"></ng-container>
-            </li>
-          </ol>
-          <blockquote *ngIf="part.type === 'blockquote'">
-            <ng-container *ngFor="let blockquotePart of $any(part).content"
+         [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+         [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : 'auto'">
+      <ng-container *ngFor="let part of elementModel.document.content">
+        <ul *ngIf="part.type === 'bulletList'"
+            [style.font-size]="part.attrs.fontSize"
+            [style.list-style]="part.attrs.listStyle">
+          <li *ngFor="let listItem of part.content">
+            <ng-container *ngFor="let listItemPart of $any(listItem).content"
                           [ngTemplateOutlet]="paragraphs"
-                          [ngTemplateOutletContext]="{ $implicit: blockquotePart }"></ng-container>
-          </blockquote>
-          <ng-container *ngIf="part.type === 'paragraph' || part.type === 'heading'"
+                          [ngTemplateOutletContext]="{ $implicit: listItemPart }"></ng-container>
+          </li>
+        </ul>
+        <ol *ngIf="part.type === 'orderedList'"
+            [style.font-size]="part.attrs.fontSize"
+            [style.list-style]="part.attrs.listStyle">
+          <li *ngFor="let listItem of part.content">
+            <ng-container *ngFor="let listItemPart of $any(listItem).content"
+                          [ngTemplateOutlet]="paragraphs"
+                          [ngTemplateOutletContext]="{ $implicit: listItemPart }"></ng-container>
+          </li>
+        </ol>
+        <blockquote *ngIf="part.type === 'blockquote'">
+          <ng-container *ngFor="let blockquotePart of $any(part).content"
                         [ngTemplateOutlet]="paragraphs"
-                        [ngTemplateOutletContext]="{ $implicit: part }"></ng-container>
-        </ng-container>
-      </div>
+                        [ngTemplateOutletContext]="{ $implicit: blockquotePart }"></ng-container>
+        </blockquote>
+        <ng-container *ngIf="part.type === 'paragraph' || part.type === 'heading'"
+                      [ngTemplateOutlet]="paragraphs"
+                      [ngTemplateOutletContext]="{ $implicit: part }"></ng-container>
+      </ng-container>
     </div>
 
     <ng-template #paragraphs let-part>
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 d2ebf53643beba0a6edf507093b4e9dc23d82fdb..065db371657e7ef8a12daf673e374364208654ed 100644
--- a/projects/common/ui-elements/drop-list/drop-list.component.ts
+++ b/projects/common/ui-elements/drop-list/drop-list.component.ts
@@ -10,7 +10,7 @@ import { DragNDropValueObject } from '../../models/uI-element';
 @Component({
   selector: 'aspect-drop-list',
   template: `
-    <div class="element-content-wrapper">
+    <div class="list-container">
       <!-- Border width is a workaround to enable/disable the Material cdk-drop-list-receiving-->
       <!-- class style.-->
       <div class="list"
@@ -69,6 +69,7 @@ import { DragNDropValueObject } from '../../models/uI-element';
     </div>
   `,
   styles: [
+    '.list-container {display: flex; flex-direction: column; width: 100%; height: 100%;}',
     '.list {border-radius: 10px; margin-bottom: 3px;}', // extra margin to reserve for outline
     '.text-item {border-radius: 10px; padding: 10px;}',
     '.item {cursor: grab}',
diff --git a/projects/common/ui-elements/dropdown/dropdown.component.ts b/projects/common/ui-elements/dropdown/dropdown.component.ts
index 72e842f3057ce91cc01c5b33e2ffdb071031847c..ec3b4e38b200d028429c238dd641d5d9d0b3d8ef 100644
--- a/projects/common/ui-elements/dropdown/dropdown.component.ts
+++ b/projects/common/ui-elements/dropdown/dropdown.component.ts
@@ -5,36 +5,34 @@ import { DropdownElement } from './dropdown-element';
 @Component({
   selector: 'aspect-dropdown',
   template: `
-    <div class="element-content-wrapper">
-      <mat-form-field appearance="fill"
-                      [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
-                      [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
-                      [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+    <mat-form-field appearance="fill"
+                    [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+                    [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
+                    [class.center-content]="elementModel.positionProps.dynamicPositioning &&
                                     elementModel.positionProps.fixedSize"
-                      aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor">
-        <mat-label [style.color]="elementModel.fontProps.fontColor"
-                   [style.font-family]="elementModel.fontProps.font"
-                   [style.font-size.px]="elementModel.fontProps.fontSize"
-                   [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
-                   [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
-                   [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
-          {{$any(elementModel).label}}
-        </mat-label>
-        <mat-select [formControl]="elementFormControl" [value]="elementModel.value">
-          <mat-option *ngIf="elementModel.allowUnset" value=""
-                      [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'"
-                      (click)="$event.preventDefault()">
-          </mat-option>
-          <mat-option *ngFor="let option of elementModel.options; let i = index" [value]="i + 1"
-                      [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'">
-            {{option}}
-          </mat-option>
-        </mat-select>
-        <mat-error *ngIf="elementFormControl.errors">
-          {{elementFormControl.errors | errorTransform: elementModel}}
-        </mat-error>
-      </mat-form-field>
-    </div>
+                    aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor">
+      <mat-label [style.color]="elementModel.fontProps.fontColor"
+                 [style.font-family]="elementModel.fontProps.font"
+                 [style.font-size.px]="elementModel.fontProps.fontSize"
+                 [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+                 [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+                 [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
+        {{$any(elementModel).label}}
+      </mat-label>
+      <mat-select [formControl]="elementFormControl" [value]="elementModel.value">
+        <mat-option *ngIf="elementModel.allowUnset" value=""
+                    [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'"
+                    (click)="$event.preventDefault()">
+        </mat-option>
+        <mat-option *ngFor="let option of elementModel.options; let i = index" [value]="i + 1"
+                    [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'">
+          {{option}}
+        </mat-option>
+      </mat-select>
+      <mat-error *ngIf="elementFormControl.errors">
+        {{elementFormControl.errors | errorTransform: elementModel}}
+      </mat-error>
+    </mat-form-field>
   `
 })
 export class DropdownComponent extends FormElementComponent {
diff --git a/projects/common/ui-elements/frame/frame.component.ts b/projects/common/ui-elements/frame/frame.component.ts
index 587ed875c29503604c905aa82cbeffcc53bf2ad7..2fc18b10b932ff6d767697a8b66ee7c9498ba986 100644
--- a/projects/common/ui-elements/frame/frame.component.ts
+++ b/projects/common/ui-elements/frame/frame.component.ts
@@ -5,21 +5,19 @@ import { ElementComponent } from '../../directives/element-component.directive';
 @Component({
   selector: 'aspect-frame',
   template: `
-    <div class="element-content-wrapper">
-      <div [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+    <div [class.center-content]="elementModel.positionProps.dynamicPositioning &&
                                    elementModel.positionProps.fixedSize"
-           [style.width]="elementModel.positionProps.fixedSize ?
+         [style.width]="elementModel.positionProps.fixedSize ?
               elementModel.width + 'px' :
               'calc(100% - ' + (elementModel.borderWidth * 2) + 'px)'"
-           [style.height]="elementModel.positionProps.fixedSize ?
+         [style.height]="elementModel.positionProps.fixedSize ?
               elementModel.height + 'px' :
               'calc(100% - ' + (elementModel.borderWidth * 2) + 'px)'"
-           [style.border-style]="elementModel.borderStyle"
-           [style.border-width.px]="elementModel.borderWidth"
-           [style.border-color]="elementModel.borderColor"
-           [style.border-radius.px]="elementModel.borderRadius"
-           [style.background-color]="elementModel.surfaceProps.backgroundColor">
-      </div>
+         [style.border-style]="elementModel.borderStyle"
+         [style.border-width.px]="elementModel.borderWidth"
+         [style.border-color]="elementModel.borderColor"
+         [style.border-radius.px]="elementModel.borderRadius"
+         [style.background-color]="elementModel.surfaceProps.backgroundColor">
     </div>
   `
 })
diff --git a/projects/common/ui-elements/image/image.component.ts b/projects/common/ui-elements/image/image.component.ts
index e9bbb468ec5c128e2f62d9eb738ea1387d8602dc..7de353f1dcaeac2185ab1864420e2d1c560a57bc 100644
--- a/projects/common/ui-elements/image/image.component.ts
+++ b/projects/common/ui-elements/image/image.component.ts
@@ -8,8 +8,7 @@ import { ValueChangeElement } from '../../models/uI-element';
 @Component({
   selector: 'aspect-image',
   template: `
-    <div class="element-content-wrapper">
-      <div [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+    <div [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
          [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
          [class.center-content]="elementModel.positionProps.dynamicPositioning &&
                                     elementModel.positionProps.fixedSize"
@@ -17,19 +16,18 @@ import { ValueChangeElement } from '../../models/uI-element';
          (mouseover)="magnifierVisible = true"
          (mouseenter)="magnifierVisible = true"
          (mouseleave)="magnifierVisible = false">
-        <img #image
-             [src]="elementModel.src | safeResourceUrl"
-             [alt]="'imageNotFound' | translate"
-             [class]="elementModel.scale ? 'fit-image' : 'max-size-image'">
-        <aspect-magnifier *ngIf="elementModel.magnifier && ( magnifierVisible || project === 'editor')"
-                       [imageId]="elementModel.id"
-                       [size]="elementModel.magnifierSize"
-                       [zoom]="elementModel.magnifierZoom"
-                       [used]="elementModel.magnifierUsed"
-                       [image]=image
-                       (elementValueChanged)="elementValueChanged.emit($event)">
-        </aspect-magnifier>
-      </div>
+      <img #image
+           [src]="elementModel.src | safeResourceUrl"
+           [alt]="'imageNotFound' | translate"
+           [class]="elementModel.scale ? 'fit-image' : 'max-size-image'">
+      <aspect-magnifier *ngIf="elementModel.magnifier && ( magnifierVisible || project === 'editor')"
+                        [imageId]="elementModel.id"
+                        [size]="elementModel.magnifierSize"
+                        [zoom]="elementModel.magnifierZoom"
+                        [used]="elementModel.magnifierUsed"
+                        [image]=image
+                        (elementValueChanged)="elementValueChanged.emit($event)">
+      </aspect-magnifier>
     </div>
   `,
   styles: [
diff --git a/projects/common/ui-elements/likert/likert.component.ts b/projects/common/ui-elements/likert/likert.component.ts
index cdb3d0c1c0c759af601839352f828b0b759ce72f..06656d878791e9c3fe3a5c29abe862f3a84022b0 100644
--- a/projects/common/ui-elements/likert/likert.component.ts
+++ b/projects/common/ui-elements/likert/likert.component.ts
@@ -13,54 +13,52 @@ import { ElementComponent } from '../../directives/element-component.directive';
     <div *ngIf="elementModel.rows.length === 0 && elementModel.columns.length === 0">
       Keine Zeilen oder Spalten vorhanden
     </div>
-    <div class="element-content-wrapper">
-      <div [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+    <div [class.center-content]="elementModel.positionProps.dynamicPositioning &&
                                  elementModel.positionProps.fixedSize"
-           [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
-           [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'">
-        <div class="mat-typography"
-             [style.display]="'grid'"
-             [style.grid-template-columns]="elementModel.firstColumnSizeRatio + 'fr ' +
+         [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+         [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'">
+      <div class="mat-typography"
+           [style.display]="'grid'"
+           [style.grid-template-columns]="elementModel.firstColumnSizeRatio + 'fr ' +
                                         '1fr '.repeat(elementModel.columns.length)"
-             [style.background-color]="elementModel.surfaceProps.backgroundColor"
-             [style.color]="elementModel.fontProps.fontColor"
-             [style.font-family]="elementModel.fontProps.font"
-             [style.font-size.px]="elementModel.fontProps.fontSize"
-             [style.line-height.%]="elementModel.fontProps.lineHeight"
-             [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
-             [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
-             [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
-          <div *ngFor="let column of elementModel.columns; let i = index"
-               class="columns" fxLayout="column" fxLayoutAlign="end center"
-               [style.grid-column-start]="2 + i"
-               [style.grid-column-end]="3 + i"
-               [style.grid-row-start]="1"
-               [style.grid-row-end]="2">
-            <img *ngIf="column.imgSrc && column.position === 'above'"
-                 [src]="column.imgSrc | safeResourceUrl" alt="Image Placeholder"
-                 [style.object-fit]="'scale-down'">
-            {{column.text}}
-            <img *ngIf="column.imgSrc && column.position === 'below'"
-                 [src]="column.imgSrc | safeResourceUrl" alt="Image Placeholder"
-                 [style.object-fit]="'scale-down'">
-          </div>
+           [style.background-color]="elementModel.surfaceProps.backgroundColor"
+           [style.color]="elementModel.fontProps.fontColor"
+           [style.font-family]="elementModel.fontProps.font"
+           [style.font-size.px]="elementModel.fontProps.fontSize"
+           [style.line-height.%]="elementModel.fontProps.lineHeight"
+           [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+           [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+           [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
+        <div *ngFor="let column of elementModel.columns; let i = index"
+             class="columns" fxLayout="column" fxLayoutAlign="end center"
+             [style.grid-column-start]="2 + i"
+             [style.grid-column-end]="3 + i"
+             [style.grid-row-start]="1"
+             [style.grid-row-end]="2">
+          <img *ngIf="column.imgSrc && column.position === 'above'"
+               [src]="column.imgSrc | safeResourceUrl" alt="Image Placeholder"
+               [style.object-fit]="'scale-down'">
+          {{column.text}}
+          <img *ngIf="column.imgSrc && column.position === 'below'"
+               [src]="column.imgSrc | safeResourceUrl" alt="Image Placeholder"
+               [style.object-fit]="'scale-down'">
+        </div>
 
-          <ng-container *ngFor="let row of elementModel.rows; let i = index">
-            <aspect-likert-radio-button-group
-                [style.background-color]="elementModel.lineColoring && i % 2 === 0 ?
+        <ng-container *ngFor="let row of elementModel.rows; let i = index">
+          <aspect-likert-radio-button-group
+              [style.background-color]="elementModel.lineColoring && i % 2 === 0 ?
                   elementModel.lineColoringColor : ''"
-                [style.grid-column-start]="1"
-                [style.grid-column-end]="elementModel.columns.length + 2"
-                [style.grid-row-start]="2 + i"
-                [style.grid-row-end]="3 + i"
-                [style.padding.px]="3"
-                [elementModel]="row"
-                [firstColumnSizeRatio]="elementModel.firstColumnSizeRatio"
-                [parentForm]="parentForm"
-                (elementValueChanged)="elementValueChanged.emit($event)">
-            </aspect-likert-radio-button-group>
-          </ng-container>
-        </div>
+              [style.grid-column-start]="1"
+              [style.grid-column-end]="elementModel.columns.length + 2"
+              [style.grid-row-start]="2 + i"
+              [style.grid-row-end]="3 + i"
+              [style.padding.px]="3"
+              [elementModel]="row"
+              [firstColumnSizeRatio]="elementModel.firstColumnSizeRatio"
+              [parentForm]="parentForm"
+              (elementValueChanged)="elementValueChanged.emit($event)">
+          </aspect-likert-radio-button-group>
+        </ng-container>
       </div>
     </div>
   `,
diff --git a/projects/common/ui-elements/radio-with-images/radio-group-images.component.ts b/projects/common/ui-elements/radio-with-images/radio-group-images.component.ts
index 61a3719fc3390bb5b6355f1dbbdbd9c5af63de83..e7da1b453581f5232222e51da34eaa072d7ad778 100644
--- a/projects/common/ui-elements/radio-with-images/radio-group-images.component.ts
+++ b/projects/common/ui-elements/radio-with-images/radio-group-images.component.ts
@@ -5,68 +5,66 @@ import { FormElementComponent } from '../../directives/form-element-component.di
 @Component({
   selector: 'aspect-radio-group-images',
   template: `
-    <div class="element-content-wrapper">
-      <div [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
-           [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
-           [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+    <div [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+         [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
+         [class.center-content]="elementModel.positionProps.dynamicPositioning &&
                                     elementModel.positionProps.fixedSize"
-           [style.display]="'grid !important'"
-           [style.grid-template-columns]="'1fr '.repeat(elementModel.columns.length)"
-           [style.background-color]="elementModel.surfaceProps.backgroundColor"
-           [style.color]="elementModel.fontProps.fontColor"
-           [style.font-family]="elementModel.fontProps.font"
-           [style.font-size.px]="elementModel.fontProps.fontSize"
-           [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
-           [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
-           [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
-        <label id="radio-group-label" class="label"
-               [style.grid-column-start]="1"
-               [style.grid-column-end]="2 + elementModel.columns.length"
-               [style.grid-row-start]="1"
-               [style.grid-row-end]="2"
-               [innerHTML]="elementModel.label">
-        </label>
-        <div *ngFor="let option of elementModel.columns; let i = index"
-             class="columns" fxLayout="column" fxLayoutAlign="center center"
-             [style.grid-column-start]="1 + i"
-             [style.grid-column-end]="2 + i"
-             [style.grid-row-start]="2"
-             [style.grid-row-end]="3"
-             (click)="selectOption(i + 1)">
-          <img *ngIf="option.imgSrc && option.position === 'above'"
-               [style.object-fit]="'scale-down'"
-               [style.max-width.%]="100"
-               [src]="option.imgSrc | safeResourceUrl" alt="Image Placeholder">
-          <div>{{option.text}}</div>
-          <img *ngIf="option.imgSrc && option.position === 'below'"
-               [style.object-fit]="'scale-down'"
-               [style.max-width.%]="100"
-               [src]="option.imgSrc | safeResourceUrl" alt="Image Placeholder">
-        </div>
-        <mat-radio-group aria-labelledby="radio-group-label"
-                         [formControl]="elementFormControl"
-                         [style.display]="'grid'"
-                         [style.grid-template-columns]="'1fr '.repeat(elementModel.columns.length)"
-                         [style.grid-column-start]="1"
-                         [style.grid-column-end]="2 + elementModel.columns.length"
-                         [style.grid-row-start]="3"
-                         [style.grid-row-end]="4"
-                         [value]="elementModel.value">
-          <mat-radio-button *ngFor="let option of elementModel.columns; let i = index"
-                            aria-labelledby="radio-group-label"
-                            [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'"
-                            [value]="i + 1"
-                            [style.grid-column-start]="1 + i"
-                            [style.grid-column-end]="2 + i"
-                            [style.grid-row-start]="1"
-                            [style.grid-row-end]="2">
-          </mat-radio-button>
-        </mat-radio-group>
-        <mat-error *ngIf="elementFormControl.errors && elementFormControl.touched"
-                   class="error-message">
-          {{elementFormControl.errors | errorTransform: elementModel}}
-        </mat-error>
+         [style.display]="'grid !important'"
+         [style.grid-template-columns]="'1fr '.repeat(elementModel.columns.length)"
+         [style.background-color]="elementModel.surfaceProps.backgroundColor"
+         [style.color]="elementModel.fontProps.fontColor"
+         [style.font-family]="elementModel.fontProps.font"
+         [style.font-size.px]="elementModel.fontProps.fontSize"
+         [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+         [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+         [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
+      <label id="radio-group-label" class="label"
+             [style.grid-column-start]="1"
+             [style.grid-column-end]="2 + elementModel.columns.length"
+             [style.grid-row-start]="1"
+             [style.grid-row-end]="2"
+             [innerHTML]="elementModel.label">
+      </label>
+      <div *ngFor="let option of elementModel.columns; let i = index"
+           class="columns" fxLayout="column" fxLayoutAlign="center center"
+           [style.grid-column-start]="1 + i"
+           [style.grid-column-end]="2 + i"
+           [style.grid-row-start]="2"
+           [style.grid-row-end]="3"
+           (click)="selectOption(i + 1)">
+        <img *ngIf="option.imgSrc && option.position === 'above'"
+             [style.object-fit]="'scale-down'"
+             [style.max-width.%]="100"
+             [src]="option.imgSrc | safeResourceUrl" alt="Image Placeholder">
+        <div>{{option.text}}</div>
+        <img *ngIf="option.imgSrc && option.position === 'below'"
+             [style.object-fit]="'scale-down'"
+             [style.max-width.%]="100"
+             [src]="option.imgSrc | safeResourceUrl" alt="Image Placeholder">
       </div>
+      <mat-radio-group aria-labelledby="radio-group-label"
+                       [formControl]="elementFormControl"
+                       [style.display]="'grid'"
+                       [style.grid-template-columns]="'1fr '.repeat(elementModel.columns.length)"
+                       [style.grid-column-start]="1"
+                       [style.grid-column-end]="2 + elementModel.columns.length"
+                       [style.grid-row-start]="3"
+                       [style.grid-row-end]="4"
+                       [value]="elementModel.value">
+        <mat-radio-button *ngFor="let option of elementModel.columns; let i = index"
+                          aria-labelledby="radio-group-label"
+                          [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'"
+                          [value]="i + 1"
+                          [style.grid-column-start]="1 + i"
+                          [style.grid-column-end]="2 + i"
+                          [style.grid-row-start]="1"
+                          [style.grid-row-end]="2">
+        </mat-radio-button>
+      </mat-radio-group>
+      <mat-error *ngIf="elementFormControl.errors && elementFormControl.touched"
+                 class="error-message">
+        {{elementFormControl.errors | errorTransform: elementModel}}
+      </mat-error>
     </div>
   `,
   styles: [
diff --git a/projects/common/ui-elements/radio/radio-button-group.component.ts b/projects/common/ui-elements/radio/radio-button-group.component.ts
index 33afd113628489e69e0d4caa8e76a02841cf94f3..9ec65927ecf1580627c85c823e75256b61e1dbd4 100644
--- a/projects/common/ui-elements/radio/radio-button-group.component.ts
+++ b/projects/common/ui-elements/radio/radio-button-group.component.ts
@@ -5,42 +5,40 @@ import { RadioButtonGroupElement } from './radio-button-group-element';
 @Component({
   selector: 'aspect-radio-button-group',
   template: `
-    <div class="element-content-wrapper">
-      <div class="mat-form-field"
-           [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
-           [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
-           [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+    <div class="mat-form-field"
+         [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+         [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
+         [class.center-content]="elementModel.positionProps.dynamicPositioning &&
                                     elementModel.positionProps.fixedSize"
-           [style.background-color]="elementModel.surfaceProps.backgroundColor"
-           [style.color]="elementModel.fontProps.fontColor"
-           [style.font-family]="elementModel.fontProps.font"
-           [style.font-size.px]="elementModel.fontProps.fontSize"
-           [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
-           [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
-           [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
-        <label id="radio-group-label"
-               [innerHTML]="elementModel.label">
-        </label>
-        <mat-radio-group aria-labelledby="radio-group-label"
-                         [fxLayout]="elementModel.alignment"
-                         [formControl]="elementFormControl"
-                         [value]="elementModel.value"
-                         [style.margin-top.px]="elementModel.label !== '' ? 10 : 0">
-          <mat-radio-button *ngFor="let option of elementModel.options; let i = index"
-                            [ngClass]="{ 'strike' : elementModel.strikeOtherOptions &&
+         [style.background-color]="elementModel.surfaceProps.backgroundColor"
+         [style.color]="elementModel.fontProps.fontColor"
+         [style.font-family]="elementModel.fontProps.font"
+         [style.font-size.px]="elementModel.fontProps.fontSize"
+         [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+         [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+         [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
+      <label id="radio-group-label"
+             [innerHTML]="elementModel.label">
+      </label>
+      <mat-radio-group aria-labelledby="radio-group-label"
+                       [fxLayout]="elementModel.alignment"
+                       [formControl]="elementFormControl"
+                       [value]="elementModel.value"
+                       [style.margin-top.px]="elementModel.label !== '' ? 10 : 0">
+        <mat-radio-button *ngFor="let option of elementModel.options; let i = index"
+                          [ngClass]="{ 'strike' : elementModel.strikeOtherOptions &&
                                                   elementFormControl.value !== null &&
                                                   elementFormControl.value !== i + 1 }"
-                            [value]="i + 1"
-                            [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'"
-                            [style.line-height.%]="elementModel.fontProps.lineHeight">
-            {{option}}
-          </mat-radio-button>
-          <mat-error *ngIf="elementFormControl.errors && elementFormControl.touched"
-                     class="error-message">
-            {{elementFormControl.errors | errorTransform: elementModel}}
-          </mat-error>
-        </mat-radio-group>
-      </div>
+                          [value]="i + 1"
+                          [style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'"
+                          [style.line-height.%]="elementModel.fontProps.lineHeight">
+          {{option}}
+        </mat-radio-button>
+        <mat-error *ngIf="elementFormControl.errors && elementFormControl.touched"
+                   class="error-message">
+          {{elementFormControl.errors | errorTransform: elementModel}}
+        </mat-error>
+      </mat-radio-group>
     </div>
   `,
   styles: [
diff --git a/projects/common/ui-elements/slider/slider.component.ts b/projects/common/ui-elements/slider/slider.component.ts
index 8ef6e415106cc0cd7a1d0bd54e139c036d3499b4..44cbded714e327ee1e1f9e82eb402777e8374339 100644
--- a/projects/common/ui-elements/slider/slider.component.ts
+++ b/projects/common/ui-elements/slider/slider.component.ts
@@ -7,90 +7,88 @@ import { FormElementComponent } from '../../directives/form-element-component.di
 @Component({
   selector: 'aspect-slider',
   template: `
-    <div class="element-content-wrapper">
-      <div fxLayout="column"
-           [style.background-color]="elementModel.surfaceProps.backgroundColor"
-           [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
-           [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
-           [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+    <div fxLayout="column"
+         [style.background-color]="elementModel.surfaceProps.backgroundColor"
+         [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+         [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
+         [class.center-content]="elementModel.positionProps.dynamicPositioning &&
                                     elementModel.positionProps.fixedSize">
-        <div *ngIf="elementModel.label"
-             [style.color]="elementModel.fontProps.fontColor"
-             [style.font-family]="elementModel.fontProps.font"
-             [style.font-size.px]="elementModel.fontProps.fontSize"
-             [style.line-height.%]="elementModel.fontProps.lineHeight"
-             [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
-             [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
-             [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
-          {{elementModel.label}}
-        </div>
-        <div #valueContainer
-             [class.values]="elementModel.label && !elementModel.showValues">
-          <div fxFlex fxLayout="row" fxLayoutAlign="space-between">
-            <div #valueMin
-                 class="value-container-min">
-              <div *ngIf="elementModel.showValues"
-                   class="value-container">
-                <div
-                    [style.color]="elementModel.fontProps.fontColor"
-                    [style.font-family]="elementModel.fontProps.font"
-                    [style.font-size.px]="elementModel.fontProps.fontSize"
-                    [style.line-height.%]="elementModel.fontProps.lineHeight"
-                    [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
-                    [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
-                    [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
-                  {{elementModel.minValue | number:'':'de'}}
-                </div>
-                <div *ngIf="elementModel.barStyle" class="number-marker"></div>
+      <div *ngIf="elementModel.label"
+           [style.color]="elementModel.fontProps.fontColor"
+           [style.font-family]="elementModel.fontProps.font"
+           [style.font-size.px]="elementModel.fontProps.fontSize"
+           [style.line-height.%]="elementModel.fontProps.lineHeight"
+           [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+           [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+           [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
+        {{elementModel.label}}
+      </div>
+      <div #valueContainer
+           [class.values]="elementModel.label && !elementModel.showValues">
+        <div fxFlex fxLayout="row" fxLayoutAlign="space-between">
+          <div #valueMin
+               class="value-container-min">
+            <div *ngIf="elementModel.showValues"
+                 class="value-container">
+              <div
+                  [style.color]="elementModel.fontProps.fontColor"
+                  [style.font-family]="elementModel.fontProps.font"
+                  [style.font-size.px]="elementModel.fontProps.fontSize"
+                  [style.line-height.%]="elementModel.fontProps.lineHeight"
+                  [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+                  [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+                  [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
+                {{elementModel.minValue | number:'':'de'}}
               </div>
+              <div *ngIf="elementModel.barStyle" class="number-marker"></div>
             </div>
-            <div #valueMax
-                 [class.value-container-max]="elementModel.barStyle">
-              <div *ngIf="elementModel.showValues"
-                   class="value-container">
-                <div
-                    [style.color]="elementModel.fontProps.fontColor"
-                    [style.font-family]="elementModel.fontProps.font"
-                    [style.font-size.px]="elementModel.fontProps.fontSize"
-                    [style.line-height.%]="elementModel.fontProps.lineHeight"
-                    [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
-                    [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
-                    [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
-                  {{elementModel.maxValue | number:'':'de'}}
-                </div>
-                <div *ngIf="elementModel.barStyle"
-                     class="number-marker">
-                </div>
+          </div>
+          <div #valueMax
+               [class.value-container-max]="elementModel.barStyle">
+            <div *ngIf="elementModel.showValues"
+                 class="value-container">
+              <div
+                  [style.color]="elementModel.fontProps.fontColor"
+                  [style.font-family]="elementModel.fontProps.font"
+                  [style.font-size.px]="elementModel.fontProps.fontSize"
+                  [style.line-height.%]="elementModel.fontProps.lineHeight"
+                  [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+                  [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+                  [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''">
+                {{elementModel.maxValue | number:'':'de'}}
+              </div>
+              <div *ngIf="elementModel.barStyle"
+                   class="number-marker">
               </div>
             </div>
           </div>
         </div>
-        <div *ngIf="elementModel.barStyle"
-             fxFlex fxLayout="row" fxLayoutAlign="space-between center"
-             [style.margin-top.px]="elementModel.showValues ? -18 : 0"
-             [style.margin-left.px]="valueMin.offsetWidth/2">
-          <div class="arrow-line"></div>
-          <div class="arrow-head"></div>
-        </div>
-        <div *ngIf="valueMax && valueMin"
-             [style.display]="'flex'"
-             [style.flex-direction]="'column'"
-             [style.height.%]="100"
-             [style.margin-right.px]="elementModel.barStyle ? valueMax.offsetWidth/2 - 8 : valueMax.offsetWidth"
-             [style.margin-left.px]="elementModel.barStyle ? valueMin.offsetWidth/2 - 8: valueMin.offsetWidth"
-             [style.margin-top.px]="elementModel.barStyle ? -32 : -valueContainer.offsetHeight">
-          <mat-slider
-              [class]="elementModel.barStyle ? 'bar-style' : ''"
-              [thumbLabel]="elementModel.thumbLabel"
-              [formControl]="elementFormControl"
-              [style.width.%]="100"
-              [max]="elementModel.maxValue"
-              [min]="elementModel.minValue">
-          </mat-slider>
-          <mat-error *ngIf="elementFormControl.touched && elementFormControl.errors">
-            {{elementModel.requiredWarnMessage}}
-          </mat-error>
-        </div>
+      </div>
+      <div *ngIf="elementModel.barStyle"
+           fxFlex fxLayout="row" fxLayoutAlign="space-between center"
+           [style.margin-top.px]="elementModel.showValues ? -18 : 0"
+           [style.margin-left.px]="valueMin.offsetWidth/2">
+        <div class="arrow-line"></div>
+        <div class="arrow-head"></div>
+      </div>
+      <div *ngIf="valueMax && valueMin"
+           [style.display]="'flex'"
+           [style.flex-direction]="'column'"
+           [style.height.%]="100"
+           [style.margin-right.px]="elementModel.barStyle ? valueMax.offsetWidth/2 - 8 : valueMax.offsetWidth"
+           [style.margin-left.px]="elementModel.barStyle ? valueMin.offsetWidth/2 - 8: valueMin.offsetWidth"
+           [style.margin-top.px]="elementModel.barStyle ? -32 : -valueContainer.offsetHeight">
+        <mat-slider
+            [class]="elementModel.barStyle ? 'bar-style' : ''"
+            [thumbLabel]="elementModel.thumbLabel"
+            [formControl]="elementFormControl"
+            [style.width.%]="100"
+            [max]="elementModel.maxValue"
+            [min]="elementModel.minValue">
+        </mat-slider>
+        <mat-error *ngIf="elementFormControl.touched && elementFormControl.errors">
+          {{elementModel.requiredWarnMessage}}
+        </mat-error>
       </div>
     </div>
   `,
diff --git a/projects/common/ui-elements/spell-correct/spell-correct.component.ts b/projects/common/ui-elements/spell-correct/spell-correct.component.ts
index d065da2db3a884b69228651954b82cf8f6270a20..046635e1798de36ac2616f6694418d1dbf954504 100644
--- a/projects/common/ui-elements/spell-correct/spell-correct.component.ts
+++ b/projects/common/ui-elements/spell-correct/spell-correct.component.ts
@@ -6,55 +6,53 @@ import { SpellCorrectElement } from './spell-correct-element';
 @Component({
   selector: 'aspect-spell-correct',
   template: `
-    <div class="element-content-wrapper">
-      <div [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
-           [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
-           [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+    <div [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+         [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
+         [class.center-content]="elementModel.positionProps.dynamicPositioning &&
              elementModel.positionProps.fixedSize">
-        <div fxFlex
-             fxLayout="column"
-             aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
-             [style.width.%]="100"
-             [style.height.%]="100">
-          <mat-form-field class="small-input">
-            <input matInput type="text"
-                   [style.text-align]="'center'"
-                   autocomplete="off"
-                   [readonly]="elementModel.readOnly"
-                   [style.color]="elementModel.fontProps.fontColor"
-                   [style.font-family]="elementModel.fontProps.font"
-                   [style.font-size.px]="elementModel.fontProps.fontSize"
-                   [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
-                   [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
-                   [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
-                   [value]="elementModel.value"
-                   [formControl]="elementFormControl">
-          </mat-form-field>
-          <button #buttonElement
-                  mat-button
-                  type="button"
-                  [disabled]="elementModel.readOnly"
-                  [style.color]="elementModel.fontProps.fontColor"
-                  [style.font-family]="elementModel.fontProps.font"
-                  [style.font-size.px]="elementModel.fontProps.fontSize"
-                  [style.font-weight]="elementModel.fontProps.bold ? 'bold' : '400'"
-                  [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
-                  [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
-                  [style.width.%]="100"
-                  [style.margin-top]="'-20px'"
-                  [style.text-decoration-line]=
+      <div fxFlex
+           fxLayout="column"
+           aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
+           [style.width.%]="100"
+           [style.height.%]="100">
+        <mat-form-field class="small-input">
+          <input matInput type="text"
+                 [style.text-align]="'center'"
+                 autocomplete="off"
+                 [readonly]="elementModel.readOnly"
+                 [style.color]="elementModel.fontProps.fontColor"
+                 [style.font-family]="elementModel.fontProps.font"
+                 [style.font-size.px]="elementModel.fontProps.fontSize"
+                 [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+                 [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+                 [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
+                 [value]="elementModel.value"
+                 [formControl]="elementFormControl">
+        </mat-form-field>
+        <button #buttonElement
+                mat-button
+                type="button"
+                [disabled]="elementModel.readOnly"
+                [style.color]="elementModel.fontProps.fontColor"
+                [style.font-family]="elementModel.fontProps.font"
+                [style.font-size.px]="elementModel.fontProps.fontSize"
+                [style.font-weight]="elementModel.fontProps.bold ? 'bold' : '400'"
+                [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+                [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
+                [style.width.%]="100"
+                [style.margin-top]="'-20px'"
+                [style.text-decoration-line]=
                     "(inputElement && inputElement.focused) ||
                     (inputElement && !!inputElement.value) ||
                     (elementFormControl && elementFormControl.value === '') ? 'line-through' : ''"
-                  (click)="
+                (click)="
                 elementFormControl.value === null ?
                 inputElement.focus() :
                 buttonElement.focus();
                 elementFormControl.value === null ?
                 (elementFormControl.setValue('')) :
                 elementFormControl.setValue(null)">{{elementModel.label}}
-          </button>
-        </div>
+        </button>
       </div>
     </div>
   `,
diff --git a/projects/common/ui-elements/text-area/text-area.component.ts b/projects/common/ui-elements/text-area/text-area.component.ts
index ccde78777fbd9d568368d6c256706c8eb7b294a2..30c1f17e51fcc7872ed810b411fe4b5b8b7a7536 100644
--- a/projects/common/ui-elements/text-area/text-area.component.ts
+++ b/projects/common/ui-elements/text-area/text-area.component.ts
@@ -7,37 +7,35 @@ import { TextAreaElement } from './text-area-element';
 @Component({
   selector: 'aspect-text-area',
   template: `
-    <div class="element-content-wrapper">
-      <mat-form-field [ngClass]="{ 'no-label' : !elementModel.label}"
-                      [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
-                      [style.min-height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
-                      [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+    <mat-form-field [ngClass]="{ 'no-label' : !elementModel.label}"
+                    [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+                    [style.min-height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
+                    [class.center-content]="elementModel.positionProps.dynamicPositioning &&
                                     elementModel.positionProps.fixedSize"
-                      aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
-                      [style.color]="elementModel.fontProps.fontColor"
-                      [style.font-family]="elementModel.fontProps.font"
-                      [style.font-size.px]="elementModel.fontProps.fontSize"
-                      [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
-                      [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
-                      [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
-                      [appearance]="$any(elementModel.appearance)">
-        <mat-label *ngIf="elementModel.label">{{elementModel.label}}</mat-label>
-        <textarea matInput #input
-                  autocomplete="off" rows="{{elementModel.rowCount}}"
-                  [formControl]="elementFormControl"
-                  [value]="$any(elementModel.value)"
-                  [readonly]="elementModel.readOnly"
-                  [style.min-width.%]="100"
-                  [style.line-height.%]="elementModel.fontProps.lineHeight"
-                  [style.resize]="elementModel.resizeEnabled ? 'both' : 'none'"
-                  (focus)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(input) : null"
-                  (blur)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(null): null">
+                    aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
+                    [style.color]="elementModel.fontProps.fontColor"
+                    [style.font-family]="elementModel.fontProps.font"
+                    [style.font-size.px]="elementModel.fontProps.fontSize"
+                    [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+                    [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+                    [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
+                    [appearance]="$any(elementModel.appearance)">
+      <mat-label *ngIf="elementModel.label">{{elementModel.label}}</mat-label>
+      <textarea matInput #input
+                autocomplete="off" rows="{{elementModel.rowCount}}"
+                [formControl]="elementFormControl"
+                [value]="$any(elementModel.value)"
+                [readonly]="elementModel.readOnly"
+                [style.min-width.%]="100"
+                [style.line-height.%]="elementModel.fontProps.lineHeight"
+                [style.resize]="elementModel.resizeEnabled ? 'both' : 'none'"
+                (focus)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(input) : null"
+                (blur)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(null): null">
       </textarea>
-        <mat-error *ngIf="elementFormControl.errors">
-          {{elementFormControl.errors | errorTransform: elementModel}}
-        </mat-error>
-      </mat-form-field>
-    </div>
+      <mat-error *ngIf="elementFormControl.errors">
+        {{elementFormControl.errors | errorTransform: elementModel}}
+      </mat-error>
+    </mat-form-field>
   `,
   styles: [
     ':host ::ng-deep div.mat-form-field-infix {padding-top: 0.2em; padding-bottom: 0.2em;}',
diff --git a/projects/common/ui-elements/text-field/text-field.component.ts b/projects/common/ui-elements/text-field/text-field.component.ts
index c7cada8e96a178f7d4ef1070c82c8f96743e82ea..7b1f780451c7d13aa1f7c3eb089a027cbd5f54b4 100644
--- a/projects/common/ui-elements/text-field/text-field.component.ts
+++ b/projects/common/ui-elements/text-field/text-field.component.ts
@@ -8,69 +8,67 @@ import { TextFieldElement } from './text-field-element';
 @Component({
   selector: 'aspect-text-field',
   template: `
-    <div class="element-content-wrapper">
-      <mat-form-field *ngIf="elementModel.label !== ''"
-                      [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+    <mat-form-field *ngIf="elementModel.label !== ''"
+                    [class.center-content]="elementModel.positionProps.dynamicPositioning &&
                                     elementModel.positionProps.fixedSize"
-                      [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
-                      [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
-                      [style.color]="elementModel.fontProps.fontColor"
-                      [style.font-family]="elementModel.fontProps.font"
-                      [style.font-size.px]="elementModel.fontProps.fontSize"
-                      [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
-                      [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
-                      [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
-                      aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
-                      [appearance]="$any(elementModel.appearance)">
-        <mat-label>{{elementModel.label}}</mat-label>
-        <input matInput type="text" #input autocomplete="off"
-               [formControl]="elementFormControl"
-               [value]="$any(elementModel.value)"
-               [pattern]="elementModel.pattern"
-               [readonly]="elementModel.readOnly"
-               (focus)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(input) : null"
-               (blur)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(null): null">
-        <button *ngIf="elementModel.clearable"
-                type="button"
-                matSuffix mat-icon-button aria-label="Clear"
-                (click)="this.elementFormControl.setValue('')">
-          <mat-icon>close</mat-icon>
-        </button>
-        <mat-error *ngIf="elementFormControl.errors">
-          {{elementFormControl.errors | errorTransform: elementModel}}
-        </mat-error>
-      </mat-form-field>
-      <mat-form-field *ngIf="elementModel.label === ''" class="small-input"
-                      [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+                    [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+                    [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
+                    [style.color]="elementModel.fontProps.fontColor"
+                    [style.font-family]="elementModel.fontProps.font"
+                    [style.font-size.px]="elementModel.fontProps.fontSize"
+                    [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+                    [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+                    [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
+                    aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
+                    [appearance]="$any(elementModel.appearance)">
+      <mat-label>{{elementModel.label}}</mat-label>
+      <input matInput type="text" #input autocomplete="off"
+             [formControl]="elementFormControl"
+             [value]="$any(elementModel.value)"
+             [pattern]="elementModel.pattern"
+             [readonly]="elementModel.readOnly"
+             (focus)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(input) : null"
+             (blur)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(null): null">
+      <button *ngIf="elementModel.clearable"
+              type="button"
+              matSuffix mat-icon-button aria-label="Clear"
+              (click)="this.elementFormControl.setValue('')">
+        <mat-icon>close</mat-icon>
+      </button>
+      <mat-error *ngIf="elementFormControl.errors">
+        {{elementFormControl.errors | errorTransform: elementModel}}
+      </mat-error>
+    </mat-form-field>
+    <mat-form-field *ngIf="elementModel.label === ''" class="small-input"
+                    [class.center-content]="elementModel.positionProps.dynamicPositioning &&
                                     elementModel.positionProps.fixedSize"
-                      [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
-                      [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
-                      [style.color]="elementModel.fontProps.fontColor"
-                      [style.font-family]="elementModel.fontProps.font"
-                      [style.font-size.px]="elementModel.fontProps.fontSize"
-                      [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
-                      [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
-                      [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
-                      aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
-                      [appearance]="$any(elementModel.appearance)">
-        <input matInput type="text" #input autocomplete="off"
-               [formControl]="elementFormControl"
-               [value]="$any(elementModel.value)"
-               [readonly]="elementModel.readOnly"
-               [pattern]="elementModel.pattern"
-               (focus)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(input) : null"
-               (blur)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(null): null">
-        <button *ngIf="elementModel.clearable"
-                type="button"
-                matSuffix mat-icon-button aria-label="Clear"
-                (click)="this.elementFormControl.setValue('')">
-          <mat-icon>close</mat-icon>
-        </button>
-        <mat-error *ngIf="elementFormControl.errors">
-          {{elementFormControl.errors | errorTransform: elementModel}}
-        </mat-error>
-      </mat-form-field>
-    </div>
+                    [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+                    [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
+                    [style.color]="elementModel.fontProps.fontColor"
+                    [style.font-family]="elementModel.fontProps.font"
+                    [style.font-size.px]="elementModel.fontProps.fontSize"
+                    [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+                    [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+                    [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
+                    aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
+                    [appearance]="$any(elementModel.appearance)">
+      <input matInput type="text" #input autocomplete="off"
+             [formControl]="elementFormControl"
+             [value]="$any(elementModel.value)"
+             [readonly]="elementModel.readOnly"
+             [pattern]="elementModel.pattern"
+             (focus)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(input) : null"
+             (blur)="elementModel.inputAssistancePreset !== 'none' ? onFocusChanged.emit(null): null">
+      <button *ngIf="elementModel.clearable"
+              type="button"
+              matSuffix mat-icon-button aria-label="Clear"
+              (click)="this.elementFormControl.setValue('')">
+        <mat-icon>close</mat-icon>
+      </button>
+      <mat-error *ngIf="elementFormControl.errors">
+        {{elementFormControl.errors | errorTransform: elementModel}}
+      </mat-error>
+    </mat-form-field>
   `,
   styles: [
     '::ng-deep app-text-field .small-input div.mat-form-field-infix {border-top: none; padding: 0.55em 0 0.25em 0;}' // TODO
@@ -86,13 +84,13 @@ export class TextFieldComponent extends FormElementComponent {
       validators.push(Validators.required);
     }
     if (this.elementModel.minLength) {
-      validators.push(Validators.minLength(<number> this.elementModel.minLength));
+      validators.push(Validators.minLength(<number>this.elementModel.minLength));
     }
     if (this.elementModel.maxLength) {
-      validators.push(Validators.maxLength(<number> this.elementModel.maxLength));
+      validators.push(Validators.maxLength(<number>this.elementModel.maxLength));
     }
     if (this.elementModel.pattern) {
-      validators.push(Validators.pattern(<string> this.elementModel.pattern));
+      validators.push(Validators.pattern(<string>this.elementModel.pattern));
     }
     return validators;
   }
diff --git a/projects/common/ui-elements/text/text.component.ts b/projects/common/ui-elements/text/text.component.ts
index 8af9f767e99cff6ca1ffe73c2888ba8a5db07203..131dca7bf9918158e4567006a32ee3022a5fdd90 100644
--- a/projects/common/ui-elements/text/text.component.ts
+++ b/projects/common/ui-elements/text/text.component.ts
@@ -8,35 +8,33 @@ import { ValueChangeElement } from '../../models/uI-element';
 @Component({
   selector: 'aspect-text',
   template: `
-    <div class="element-content-wrapper">
-      <div [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+    <div [class.center-content]="elementModel.positionProps.dynamicPositioning &&
                                    elementModel.positionProps.fixedSize"
-           [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
-           [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : 'auto'">
-        <aspect-marking-bar
-            *ngIf="elementModel.highlightableYellow ||
+         [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+         [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : 'auto'">
+      <aspect-marking-bar
+          *ngIf="elementModel.highlightableYellow ||
               elementModel.highlightableTurquoise ||
               elementModel.highlightableOrange"
-            [elementModel]="elementModel"
-            (selectionChanged)="onSelectionChanged($event)">
-        </aspect-marking-bar>
-        <div #textContainerRef class="text-container"
-             [class.orange-selection]="selectedColor === 'orange'"
-             [class.yellow-selection]="selectedColor === 'yellow'"
-             [class.turquoise-selection]="selectedColor === 'turquoise'"
-             [class.delete-selection]="selectedColor === 'delete'"
-             [style.background-color]="elementModel.surfaceProps.backgroundColor"
-             [style.color]="elementModel.fontProps.fontColor"
-             [style.font-family]="elementModel.fontProps.font"
-             [style.font-size.px]="elementModel.fontProps.fontSize"
-             [style.line-height.%]="elementModel.fontProps.lineHeight"
-             [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
-             [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
-             [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
-             [innerHTML]="elementModel.text | safeResourceHTML"
-             (touchstart)="emitStartSelection($event)"
-             (mousedown)="emitStartSelection($event)">
-        </div>
+          [elementModel]="elementModel"
+          (selectionChanged)="onSelectionChanged($event)">
+      </aspect-marking-bar>
+      <div #textContainerRef class="text-container"
+           [class.orange-selection]="selectedColor === 'orange'"
+           [class.yellow-selection]="selectedColor === 'yellow'"
+           [class.turquoise-selection]="selectedColor === 'turquoise'"
+           [class.delete-selection]="selectedColor === 'delete'"
+           [style.background-color]="elementModel.surfaceProps.backgroundColor"
+           [style.color]="elementModel.fontProps.fontColor"
+           [style.font-family]="elementModel.fontProps.font"
+           [style.font-size.px]="elementModel.fontProps.fontSize"
+           [style.line-height.%]="elementModel.fontProps.lineHeight"
+           [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+           [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+           [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
+           [innerHTML]="elementModel.text | safeResourceHTML"
+           (touchstart)="emitStartSelection($event)"
+           (mousedown)="emitStartSelection($event)">
       </div>
     </div>
   `,
diff --git a/projects/common/ui-elements/video/video.component.ts b/projects/common/ui-elements/video/video.component.ts
index 57af17b86f99fea61ce278050a8b9e8b56c59fb3..f6a9502fd1734f4b7a25390026050b71b26dae8a 100644
--- a/projects/common/ui-elements/video/video.component.ts
+++ b/projects/common/ui-elements/video/video.component.ts
@@ -5,29 +5,27 @@ import { MediaPlayerElementComponent } from '../../directives/media-player-eleme
 @Component({
   selector: 'aspect-video',
   template: `
-    <div class="element-content-wrapper">
-      <div [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
-           [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
-           [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+    <div [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+         [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
+         [class.center-content]="elementModel.positionProps.dynamicPositioning &&
              elementModel.positionProps.fixedSize"
-           [class]="elementModel.scale ? 'fit-video' : 'max-size-video'">
-        <video #player
-               (playing)="onMediaPlayStatusChanged.emit(this.elementModel.id)"
-               (pause)="onMediaPlayStatusChanged.emit(null)"
-               [style.width.%]="100"
-               [src]="elementModel.src | safeResourceUrl">
-        </video>
-        <aspect-control-bar class="correct-position"
-                            [player]="player"
-                            [project]="project"
-                            [active]="active"
-                            [id]="elementModel.id"
-                            [playerProperties]="elementModel.playerProps"
-                            [dependencyDissolved]="dependencyDissolved"
-                            (onMediaValidStatusChanged)="onMediaValidStatusChanged.emit($event)"
-                            (elementValueChanged)="elementValueChanged.emit($event)">
-        </aspect-control-bar>
-      </div>
+         [class]="elementModel.scale ? 'fit-video' : 'max-size-video'">
+      <video #player
+             (playing)="onMediaPlayStatusChanged.emit(this.elementModel.id)"
+             (pause)="onMediaPlayStatusChanged.emit(null)"
+             [style.width.%]="100"
+             [src]="elementModel.src | safeResourceUrl">
+      </video>
+      <aspect-control-bar class="correct-position"
+                          [player]="player"
+                          [project]="project"
+                          [active]="active"
+                          [id]="elementModel.id"
+                          [playerProperties]="elementModel.playerProps"
+                          [dependencyDissolved]="dependencyDissolved"
+                          (onMediaValidStatusChanged)="onMediaValidStatusChanged.emit($event)"
+                          (elementValueChanged)="elementValueChanged.emit($event)">
+      </aspect-control-bar>
     </div>
   `,
   styles: [
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/overlays/dynamic-canvas-overlay.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/overlays/dynamic-canvas-overlay.component.ts
index ced10afe428520c9b30f04a3d510605f7a4539f3..8c16596df3ba578fab46530f7aeda58dd7411e97 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/overlays/dynamic-canvas-overlay.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/overlays/dynamic-canvas-overlay.component.ts
@@ -11,6 +11,8 @@ import { UIElement } from '../../../../../../../../common/models/uI-element';
     <!-- TabIndex is needed to make the div selectable and catch keyboard events (delete). -->
     <!-- DragStart and DragEnd are part of a cursor hack to style the body. See global styling file. -->
     <div #draggableElement class="draggable-element"
+         [class.fixed-size-content-wrapper]="element.positionProps?.dynamicPositioning &&
+            element.positionProps?.fixedSize"
          [class.temporaryHighlight]="temporaryHighlight"
          [style.display]="dragging ? 'none' : ''"
          tabindex="-1"
diff --git a/projects/player/src/app/components/element-container/element-container.component.html b/projects/player/src/app/components/element-container/element-container.component.html
index af1244265b121ebcedcdeba7ca6086d40263e480..21f2e4a5cfa70ebd4bc318fba985688309eb97b4 100644
--- a/projects/player/src/app/components/element-container/element-container.component.html
+++ b/projects/player/src/app/components/element-container/element-container.component.html
@@ -1,4 +1,5 @@
-<div class="element-container"
+<div [class]="elementModel.positionProps?.dynamicPositioning && elementModel.positionProps?.fixedSize ?
+         'fixed-size-content-wrapper' : 'element-container'"
      cdkOverlayOrigin #overlayOrigin="cdkOverlayOrigin">
   <ng-template #elementComponentContainer></ng-template>
 </div>