From 9a8afad08009d9ea5982eb3db89ea9e258734ad9 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Thu, 17 Feb 2022 16:53:26 +0100
Subject: [PATCH] Refactor fixed size of dynamically positioned elements
Move required styles and classes to the overlays of player and editor
---
projects/common/assets/styles.css | 2 +-
.../ui-elements/audio/audio.component.ts | 8 ++-----
.../ui-elements/button/button.component.ts | 8 ++-----
.../checkbox/checkbox.component.ts | 8 ++-----
.../ui-elements/cloze/cloze.component.ts | 8 ++-----
.../drop-list/drop-list.component.ts | 8 ++-----
.../dropdown/dropdown.component.ts | 8 ++-----
.../ui-elements/frame/frame.component.ts | 10 ++-------
.../ui-elements/image/image.component.ts | 6 ++---
.../ui-elements/likert/likert.component.ts | 8 ++-----
.../radio-group-images.component.ts | 8 ++-----
.../radio/radio-button-group.component.ts | 8 ++-----
.../ui-elements/slider/slider.component.ts | 8 ++-----
.../spell-correct/spell-correct.component.ts | 8 ++-----
.../text-area/text-area.component.ts | 11 +++-------
.../text-field/text-field.component.ts | 22 ++++++-------------
.../common/ui-elements/text/text.component.ts | 8 ++-----
.../ui-elements/video/video.component.ts | 8 ++-----
.../dynamic-canvas-overlay.component.ts | 9 +++++++-
.../element-container.component.html | 13 ++++++++---
20 files changed, 59 insertions(+), 118 deletions(-)
diff --git a/projects/common/assets/styles.css b/projects/common/assets/styles.css
index 90dcb03be..1ceddfc57 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 6f3964ada..67133d57a 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 0c7694952..386c381a4 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 567930d7c..f38c7e613 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 b15c9dd00..1143aa761 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 3475edfb6..47f15c205 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 6541f0cc4..534ae21ca 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 075c1c582..1b2504777 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 04e498c85..b985d80cd 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 d122db116..cc1f13842 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 2e207b71f..fea408707 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 c50854e4c..e80f1f197 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 d0ecee6c1..f7a4f0673 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 1f2e946f4..13b46a8f3 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 86d7fb170..6f9b45102 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 d9a3aa149..b0cfc41ea 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 fddc54dc8..519a904ec 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 9f645f898..ec6b67f4b 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 8c16596df..748ac2e34 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 699c998e1..b6032f71d 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
--
GitLab