diff --git a/projects/common/element-components/image.component.ts b/projects/common/element-components/image.component.ts index da5a0cb92110648e6e4c16cfa0df081a98bc7db7..c63919811efd3697e38c07d543a7c46621fdb66c 100644 --- a/projects/common/element-components/image.component.ts +++ b/projects/common/element-components/image.component.ts @@ -5,11 +5,14 @@ import { ElementComponent } from '../element-component.directive'; @Component({ selector: 'app-image', template: ` + <div [style.height.%]="100" + [style.width.%]="100"> <img [src]="elementModel.src | safeResourceUrl" alt="Image Placeholder" [style.object-fit]="'contain'" [style.height.%]="100" [style.width.%]="100"> + </div> ` }) export class ImageComponent extends ElementComponent { diff --git a/projects/common/element-components/radio-button-group.component.ts b/projects/common/element-components/radio-button-group.component.ts index d8027ed716dbc73820e4937ffa3b9af795628e42..9531807c2659d9a53cd12adb0b88a2d9019d634a 100644 --- a/projects/common/element-components/radio-button-group.component.ts +++ b/projects/common/element-components/radio-button-group.component.ts @@ -5,25 +5,25 @@ import { FormElementComponent } from '../form-element-component.directive'; @Component({ selector: 'app-radio-button-group', template: ` - <div [style.width.%]="100" - [style.height.%]="100" - [style.background-color]="elementModel.backgroundColor" - [style.color]="elementModel.fontColor" - [style.font-family]="elementModel.font" - [style.font-size.px]="elementModel.fontSize" - [style.font-weight]="elementModel.bold ? 'bold' : ''" - [style.font-style]="elementModel.italic ? 'italic' : ''" - [style.text-decoration]="elementModel.underline ? 'underline' : ''"> - <label [innerHTML]="elementModel.label" id="radio-group-label"></label> - <mat-radio-group aria-labelledby="radio-group-label" - [style.margin-bottom.px]="10" - fxLayout="{{elementModel.alignment}}" - [formControl]="elementFormControl"> - <mat-radio-button *ngFor="let option of elementModel.options" [value]="option"> - {{option}} - </mat-radio-button> - </mat-radio-group> - </div> + <div [style.width.%]="100" + [style.height.%]="100" + [style.background-color]="elementModel.backgroundColor" + [style.color]="elementModel.fontColor" + [style.font-family]="elementModel.font" + [style.font-size.px]="elementModel.fontSize" + [style.font-weight]="elementModel.bold ? 'bold' : ''" + [style.font-style]="elementModel.italic ? 'italic' : ''" + [style.text-decoration]="elementModel.underline ? 'underline' : ''"> + <label [innerHTML]="elementModel.label" id="radio-group-label"></label> + <mat-radio-group aria-labelledby="radio-group-label" + [style.margin-bottom.px]="20" + [fxLayout]="elementModel.alignment" + [formControl]="elementFormControl"> + <mat-radio-button *ngFor="let option of elementModel.options" [value]="option"> + {{option}} + </mat-radio-button> + </mat-radio-group> + </div> ` }) export class RadioButtonGroupComponent extends FormElementComponent { diff --git a/projects/common/element-components/video.component.ts b/projects/common/element-components/video.component.ts index f403af3c3f0947994c3afd3f6014ceb085bc0be1..f0e27bdd92ca9e443e6e84a0381449d12eaca9ea 100644 --- a/projects/common/element-components/video.component.ts +++ b/projects/common/element-components/video.component.ts @@ -5,11 +5,14 @@ import { ElementComponent } from '../element-component.directive'; @Component({ selector: 'app-video', template: ` + <div [style.height.%]="100" + [style.width.%]="100"> <video controls [src]="elementModel.src | safeResourceUrl" [style.object-fit]="'contain'" [style.height.%]="100" [style.width.%]="100"> </video> + </div> ` }) export class VideoComponent extends ElementComponent { diff --git a/projects/player/src/app/components/element-overlay/element-overlay.component.ts b/projects/player/src/app/components/element-overlay/element-overlay.component.ts index da16bd367316ea2fd6e684e1a3f0969862f18754..99fbe8822ec72238b026580531f259cb779b31a3 100644 --- a/projects/player/src/app/components/element-overlay/element-overlay.component.ts +++ b/projects/player/src/app/components/element-overlay/element-overlay.component.ts @@ -36,11 +36,7 @@ export class ElementOverlayComponent implements OnInit { const elementComponentFactory = ComponentUtils.getComponentFactory(this.elementModel.type, this.componentFactoryResolver); - const elementComponentRef = this.elementComponentContainer.createComponent(elementComponentFactory); - elementComponentRef.location.nativeElement.style.display = 'block'; - elementComponentRef.location.nativeElement.style.height = '100%'; - - const elementComponent = elementComponentRef.instance; + const elementComponent = this.elementComponentContainer.createComponent(elementComponentFactory).instance; elementComponent.elementModel = this.elementModel; if (this.isInputElement) { diff --git a/projects/player/src/app/components/element/element.component.html b/projects/player/src/app/components/element/element.component.html index 1c371fed24f7406ece67a66b1a87f5ccbd0c7f71..691a428338534457297f60e097fd184bd7c61fba 100644 --- a/projects/player/src/app/components/element/element.component.html +++ b/projects/player/src/app/components/element/element.component.html @@ -1,8 +1,4 @@ <app-element-overlay - [style.overflow]="'auto'" - [style.display]="elementModel.dynamicPositioning ?'contents' : 'block'" - [style.width]="elementModel.dynamicPositioning ? '100%': elementModel.width + 'px'" - [style.height]="elementModel.dynamicPositioning ? '100%' : elementModel.height + 'px'" [elementModel]="elementModel" [parentForm]="elementForm" [parentArrayIndex]="parentArrayIndex" diff --git a/projects/player/src/app/components/section/section.component.html b/projects/player/src/app/components/section/section.component.html index aede4daf39d1fe90ab7c1b6f2cdb72b36f401f11..c6ccce40175067ad4bfbacf28fec1d4da3ad8934 100644 --- a/projects/player/src/app/components/section/section.component.html +++ b/projects/player/src/app/components/section/section.component.html @@ -3,10 +3,12 @@ <ng-template #staticElements> <ng-container *ngFor="let element of section.elements; let i = index"> <app-element + [style.overflow]="'auto'" + [style.width.px]="element.width" + [style.height.px]="element.height" [style.position]="'absolute'" [style.left.px]="element.xPosition" [style.top.px]="element.yPosition" - [style.display]="'block'" [elementModel]="element" [parentForm]="sectionForm" [parentArrayIndex]="i"> @@ -30,7 +32,6 @@ [style.grid-column-end]="element.gridColumnEnd" [style.grid-row-start]="element.gridRowStart" [style.grid-row-end]="element.gridRowEnd" - [style.display]="element.dynamicPositioning ? (element.type === 'radio') ? 'contents' : 'inline' : 'block'" [elementModel]="element" [parentForm]="sectionForm" [parentArrayIndex]="i">