diff --git a/projects/common/assets/styles.css b/projects/common/assets/styles.css
index 90dcb03be48784b6d50a24a6ddee092d84cba42e..1ceddfc57fcd32aff335292a0e2a4f493cb9710e 100644
--- a/projects/common/assets/styles.css
+++ b/projects/common/assets/styles.css
@@ -57,6 +57,6 @@ blockquote p {
height: 100%;
}
-.fixed-size-element {
+.fixed-size-content {
overflow: auto;
}
diff --git a/projects/common/ui-elements/audio/audio.component.ts b/projects/common/ui-elements/audio/audio.component.ts
index 6f3964adad7939783ac3fc0d0087701e18f1579a..67133d57a9df2cbe7d7a0e5f2bde59b67be50428 100644
--- a/projects/common/ui-elements/audio/audio.component.ts
+++ b/projects/common/ui-elements/audio/audio.component.ts
@@ -5,12 +5,8 @@ import { MediaPlayerElementComponent } from '../../directives/media-player-eleme
@Component({
selector: 'aspect-audio',
template: `
- <div [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
- elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.height + 'px' : '100%'">
+ <div [style.width.%]="100"
+ [style.height.%]="100">
<audio #player
(playing)="onMediaPlayStatusChanged.emit(this.elementModel.id)"
(pause)="onMediaPlayStatusChanged.emit(null)"
diff --git a/projects/common/ui-elements/button/button.component.ts b/projects/common/ui-elements/button/button.component.ts
index 0c7694952fa482f63de35d0364abf09244698a01..386c381a443818850dc3e7bf534859ca5af610b9 100644
--- a/projects/common/ui-elements/button/button.component.ts
+++ b/projects/common/ui-elements/button/button.component.ts
@@ -7,12 +7,8 @@ import { ButtonElement } from './button-element';
@Component({
selector: 'aspect-button',
template: `
- <div [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
- elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.height + 'px' : '100%'">
+ <div [style.width.%]="100"
+ [style.height.%]="100">
<button *ngIf="!elementModel.imageSrc" mat-button
type='button'
class="fill-container"
diff --git a/projects/common/ui-elements/checkbox/checkbox.component.ts b/projects/common/ui-elements/checkbox/checkbox.component.ts
index 567930d7cb70282cdd29421dcaf36915e5f7c967..f38c7e6131c6fdf0786f07bccdda8652f49c20c9 100644
--- a/projects/common/ui-elements/checkbox/checkbox.component.ts
+++ b/projects/common/ui-elements/checkbox/checkbox.component.ts
@@ -7,12 +7,8 @@ import { CheckboxElement } from './checkbox-element';
selector: 'aspect-checkbox',
template: `
<div class="mat-form-field"
- [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
- elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.height + 'px' : '100%'"
+ [style.width.%]="100"
+ [style.height.%]="100"
[style.background-color]="elementModel.surfaceProps.backgroundColor">
<mat-checkbox #checkbox class="example-margin"
[formControl]="elementFormControl"
diff --git a/projects/common/ui-elements/cloze/cloze.component.ts b/projects/common/ui-elements/cloze/cloze.component.ts
index b15c9dd008a945c29446cd0eed9568814299dadf..1143aa761a8f1c3fe94befe62c6343a9127eccf8 100644
--- a/projects/common/ui-elements/cloze/cloze.component.ts
+++ b/projects/common/ui-elements/cloze/cloze.component.ts
@@ -13,12 +13,8 @@ import { ElementComponent } from '../../directives/element-component.directive';
<ng-container *ngIf="elementModel.document.content.length == 0">
Kein Dokument vorhanden
</ng-container>
- <div [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
- elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.height + 'px' : 'auto'">
+ <div [style.width.%]="100"
+ [style.height]="'auto'">
<ng-container *ngFor="let part of elementModel.document.content">
<ul *ngIf="part.type === 'bulletList'"
[style.font-size]="part.attrs.fontSize"
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 3475edfb680efc03aaf7bf2f9c1749b05b671e89..47f15c205dd0d988d4e269dc3cbdd68c48f045e7 100644
--- a/projects/common/ui-elements/drop-list/drop-list.component.ts
+++ b/projects/common/ui-elements/drop-list/drop-list.component.ts
@@ -14,12 +14,8 @@ import { DragNDropValueObject } from '../../models/uI-element';
<!-- Border width is a workaround to enable/disable the Material cdk-drop-list-receiving-->
<!-- class style.-->
<div class="list"
- [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
- elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.height + 'px' : '100%'"
+ [style.width.%]="100"
+ [style.height.%]="100"
[ngClass]="{ 'align-flex' : elementModel.orientation === 'flex' }"
[class.dropList-highlight]="elementModel.highlightReceivingDropList"
[style.outline-color]="elementModel.highlightReceivingDropListColor"
diff --git a/projects/common/ui-elements/dropdown/dropdown.component.ts b/projects/common/ui-elements/dropdown/dropdown.component.ts
index 6541f0cc4fc9d070920768fcbb3c67cc33c59311..534ae21caee6cf993e4b39ec3da2b281e0180429 100644
--- a/projects/common/ui-elements/dropdown/dropdown.component.ts
+++ b/projects/common/ui-elements/dropdown/dropdown.component.ts
@@ -7,12 +7,8 @@ import { DropdownElement } from './dropdown-element';
template: `
<mat-form-field
appearance="fill"
- [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
- elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.height + 'px' : '100%'"
+ [style.width.%]="100"
+ [style.height.%]="100"
aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor">
<mat-label [style.color]="elementModel.fontProps.fontColor"
[style.font-family]="elementModel.fontProps.font"
diff --git a/projects/common/ui-elements/frame/frame.component.ts b/projects/common/ui-elements/frame/frame.component.ts
index 075c1c5824c577bf22b172e229108b5425dbbfb4..1b2504777d1f107699d4b81b1980bd84edfa2cc9 100644
--- a/projects/common/ui-elements/frame/frame.component.ts
+++ b/projects/common/ui-elements/frame/frame.component.ts
@@ -5,14 +5,8 @@ import { ElementComponent } from '../../directives/element-component.directive';
@Component({
selector: 'aspect-frame',
template: `
- <div [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
- elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.width + 'px' :
- 'calc(100% - ' + (elementModel.borderWidth * 2) + 'px)'"
- [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.height + 'px' :
- 'calc(100% - ' + (elementModel.borderWidth * 2) + 'px)'"
+ <div [style.width]="'calc(100% - ' + (elementModel.borderWidth * 2) + 'px)'"
+ [style.height]="'calc(100% - ' + (elementModel.borderWidth * 2) + 'px)'"
[style.border-style]="elementModel.borderStyle"
[style.border-width.px]="elementModel.borderWidth"
[style.border-color]="elementModel.borderColor"
diff --git a/projects/common/ui-elements/image/image.component.ts b/projects/common/ui-elements/image/image.component.ts
index 04e498c85fa19f3430cde6f7611d12431effcd34..b985d80cdfeac3e89e1f829d01212378e847b214 100644
--- a/projects/common/ui-elements/image/image.component.ts
+++ b/projects/common/ui-elements/image/image.component.ts
@@ -8,10 +8,8 @@ import { ValueChangeElement } from '../../models/uI-element';
@Component({
selector: 'aspect-image',
template: `
- <div [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.height + 'px' : '100%'"
+ <div [style.width.%]="100"
+ [style.height.%]="100"
class="image-container"
(mouseover)="magnifierVisible = true"
(mouseenter)="magnifierVisible = true"
diff --git a/projects/common/ui-elements/likert/likert.component.ts b/projects/common/ui-elements/likert/likert.component.ts
index d122db116224aa799bac445c837c3c78e39846a0..cc1f13842fd826bcf47797dff17e8de07078c4ce 100644
--- a/projects/common/ui-elements/likert/likert.component.ts
+++ b/projects/common/ui-elements/likert/likert.component.ts
@@ -13,12 +13,8 @@ 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.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
- elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.height + 'px' : '100%'">
+ <div [style.width.%]="100"
+ [style.height.%]="100">
<div class="mat-typography"
[style.display]="'grid'"
[style.grid-template-columns]="elementModel.firstColumnSizeRatio + 'fr ' +
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 2e207b71f0e3839be89e2035ad2de9d4ad05421b..fea4087075bd611b22d4760498755668c7a1c831 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,12 +5,8 @@ import { FormElementComponent } from '../../directives/form-element-component.di
@Component({
selector: 'aspect-radio-group-images',
template: `
- <div [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
- elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.height + 'px' : '100%'"
+ <div [style.width.%]="100"
+ [style.height.%]="100"
[style.display]="'grid !important'"
[style.grid-template-columns]="'1fr '.repeat(elementModel.columns.length)"
[style.background-color]="elementModel.surfaceProps.backgroundColor"
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 c50854e4cbd85e9957a6e65831eee73c4a36b45a..e80f1f1977cf056d0429221e065b619ec463fa79 100644
--- a/projects/common/ui-elements/radio/radio-button-group.component.ts
+++ b/projects/common/ui-elements/radio/radio-button-group.component.ts
@@ -6,12 +6,8 @@ import { RadioButtonGroupElement } from './radio-button-group-element';
selector: 'aspect-radio-button-group',
template: `
<div class="mat-form-field"
- [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
- elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.height + 'px' : '100%'"
+ [style.width.%]="100"
+ [style.height.%]="100"
[style.background-color]="elementModel.surfaceProps.backgroundColor"
[style.color]="elementModel.fontProps.fontColor"
[style.font-family]="elementModel.fontProps.font"
diff --git a/projects/common/ui-elements/slider/slider.component.ts b/projects/common/ui-elements/slider/slider.component.ts
index d0ecee6c15e42ad29bb26276dc545d6f0761addc..f7a4f067395bd389418e8eb417fc83fbd5c78f5a 100644
--- a/projects/common/ui-elements/slider/slider.component.ts
+++ b/projects/common/ui-elements/slider/slider.component.ts
@@ -8,12 +8,8 @@ import { FormElementComponent } from '../../directives/form-element-component.di
selector: 'aspect-slider',
template: `
<div fxLayout="column"
- [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
- elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.height + 'px' : '100%'"
+ [style.width.%]="100"
+ [style.height.%]="100"
[style.background-color]="elementModel.surfaceProps.backgroundColor">
<div *ngIf="elementModel.label"
[style.color]="elementModel.fontProps.fontColor"
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 1f2e946f4311b93b3d51d83a2ea95fcce49bfd69..13b46a8f31fa46baf10e73fccd0f3f830b9d1362 100644
--- a/projects/common/ui-elements/spell-correct/spell-correct.component.ts
+++ b/projects/common/ui-elements/spell-correct/spell-correct.component.ts
@@ -6,12 +6,8 @@ import { SpellCorrectElement } from './spell-correct-element';
@Component({
selector: 'aspect-spell-correct',
template: `
- <div [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
- elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.height + 'px' : '100%'">
+ <div [style.width.%]="100"
+ [style.height.%]="100">
<div fxFlex
fxLayout="column"
aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
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 86d7fb170eaea5ebb05187833ec64eceea976c67..6f9b45102f9f8acc42f2e16878765b3aa486a50e 100644
--- a/projects/common/ui-elements/text-area/text-area.component.ts
+++ b/projects/common/ui-elements/text-area/text-area.component.ts
@@ -9,14 +9,9 @@ import { TextAreaElement } from './text-area-element';
template: `
<mat-form-field
[ngClass]="{ 'no-label' : !elementModel.label}"
- [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
- elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.width + 'px' : '100%'"
- [style.min-height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.height + 'px' : '100%'"
- [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.height + 'px' : '100%'"
+ [style.width.%]="100"
+ [style.height.%]="100"
+ [style.min-height.%]="100"
aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
[style.color]="elementModel.fontProps.fontColor"
[style.font-family]="elementModel.fontProps.font"
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 d9a3aa14910cb07a3b45f869bebcbcadbc1c1003..b0cfc41eada0457324a78aed1b3e467d607404a0 100644
--- a/projects/common/ui-elements/text-field/text-field.component.ts
+++ b/projects/common/ui-elements/text-field/text-field.component.ts
@@ -10,12 +10,8 @@ import { TextFieldElement } from './text-field-element';
template: `
<mat-form-field
*ngIf="elementModel.label !== ''"
- [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
- elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.height + 'px' : '100%'"
+ [style.width.%]="100"
+ [style.height.%]="100"
[style.color]="elementModel.fontProps.fontColor"
[style.font-family]="elementModel.fontProps.font"
[style.font-size.px]="elementModel.fontProps.fontSize"
@@ -44,12 +40,8 @@ import { TextFieldElement } from './text-field-element';
</mat-form-field>
<mat-form-field
*ngIf="elementModel.label === ''" class="small-input"
- [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
- elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.height + 'px' : '100%'"
+ [style.width.%]="100"
+ [style.height.%]="100"
[style.color]="elementModel.fontProps.fontColor"
[style.font-family]="elementModel.fontProps.font"
[style.font-size.px]="elementModel.fontProps.fontSize"
@@ -90,13 +82,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 fddc54dc8f0b289176a17fd74cb16088fdeba875..519a904ec1e7ae140219e38bf9f16b203587e37f 100644
--- a/projects/common/ui-elements/text/text.component.ts
+++ b/projects/common/ui-elements/text/text.component.ts
@@ -8,12 +8,8 @@ import { ValueChangeElement } from '../../models/uI-element';
@Component({
selector: 'aspect-text',
template: `
- <div [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
- elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.height + 'px' : 'auto'">
+ <div [style.width.%]="100"
+ [style.height.%]="100">
<aspect-marking-bar
*ngIf="elementModel.highlightableYellow ||
elementModel.highlightableTurquoise ||
diff --git a/projects/common/ui-elements/video/video.component.ts b/projects/common/ui-elements/video/video.component.ts
index 9f645f898a0fc260a0b082ff58825e2edf8b5994..ec6b67f4b06b33ae69a3324152ca0af89521e9ff 100644
--- a/projects/common/ui-elements/video/video.component.ts
+++ b/projects/common/ui-elements/video/video.component.ts
@@ -6,12 +6,8 @@ import { MediaPlayerElementComponent } from '../../directives/media-player-eleme
selector: 'aspect-video',
template: `
<div [class]="elementModel.scale ? 'fit-video' : 'max-size-video'"
- [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
- elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
- elementModel.height + 'px' : '100%'">
+ [style.width.%]="100"
+ [style.height.%]="100">
<video #player
(playing)="onMediaPlayStatusChanged.emit(this.elementModel.id)"
(pause)="onMediaPlayStatusChanged.emit(null)"
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 8c16596df3ba578fab46530f7aeda58dd7411e97..748ac2e349af11323c620f24a9208b240ff5e86d 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
@@ -34,7 +34,14 @@ import { UIElement } from '../../../../../../../../common/models/uI-element';
<div *cdkDragPlaceholder></div>
</div>
</div>
- <ng-template #elementContainer></ng-template>
+ <div [class.fixed-size-content]="element.positionProps?.dynamicPositioning &&
+ element.positionProps?.fixedSize"
+ [style.width]="element.positionProps?.dynamicPositioning && element.positionProps?.fixedSize ?
+ element.width + 'px' : '100%'"
+ [style.height]="element.positionProps?.dynamicPositioning && element.positionProps?.fixedSize ?
+ element.height + 'px' : '100%'">
+ <ng-template #elementContainer></ng-template>
+ </div>
</div>
<div class="resize-preview"
[style.position]="'relative'"
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 699c998e141570a79a8d147ff43f43b82088e0b2..b6032f71d28219a5b47870f39f17b027cccf9cbe 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,7 +1,14 @@
<div [class]="elementModel.positionProps?.dynamicPositioning && elementModel.positionProps?.fixedSize ?
- 'fixed-size-content-wrapper' : 'element-container'"
- cdkOverlayOrigin #overlayOrigin="cdkOverlayOrigin">
- <ng-template #elementComponentContainer></ng-template>
+ 'fixed-size-content-wrapper' : 'element-container'">
+ <div [class]="elementModel.positionProps?.dynamicPositioning && elementModel.positionProps?.fixedSize ?
+ 'fixed-size-content' : 'element-container'"
+ [style.width]="elementModel.positionProps?.dynamicPositioning && elementModel.positionProps?.fixedSize ?
+ elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps?.dynamicPositioning && elementModel.positionProps?.fixedSize ?
+ elementModel.height + 'px' : '100%'"
+ cdkOverlayOrigin #overlayOrigin="cdkOverlayOrigin">
+ <ng-template #elementComponentContainer></ng-template>
+ </div>
</div>
<aspect-floating-keyboard