diff --git a/projects/player/src/app/components/section/section.component.css b/projects/player/src/app/components/section/section.component.css new file mode 100644 index 0000000000000000000000000000000000000000..b68278e368a1669d82d3f0d343aee51040b6180a --- /dev/null +++ b/projects/player/src/app/components/section/section.component.css @@ -0,0 +1,11 @@ +.dynamic-section { + display: grid; + position: relative; + z-index: 0; +} + +.static-element { + display: block; + position: absolute; + overflow: auto; +} diff --git a/projects/player/src/app/components/section/section.component.html b/projects/player/src/app/components/section/section.component.html index 7f0976d7a4a50bc931b569fecc06eb4fd84d454f..f92a0653fe8e5e6a9be998c0ff64d5543c99b6df 100644 --- a/projects/player/src/app/components/section/section.component.html +++ b/projects/player/src/app/components/section/section.component.html @@ -3,11 +3,9 @@ <ng-template #staticElements> <ng-container *ngFor="let element of section.elements; let i = index"> <app-element-container - [style.display]="'block'" - [style.overflow]="'auto'" + class="static-element" [style.width.px]="element.width" [style.height.px]="element.height" - [style.position]="'absolute'" [style.left.px]="element.positionProps.xPosition" [style.top.px]="element.positionProps.yPosition" [style.z-index]="element.positionProps?.zIndex" @@ -20,12 +18,13 @@ </ng-template> <ng-template #dynamicElements> - <div [style.display]="'grid'" - [style.grid-template-columns]="!section.autoColumnSize ? section.gridColumnSizes : undefined" - [style.grid-template-rows]="!section.autoRowSize ? section.gridRowSizes : undefined" - [style.grid-auto-columns]="section.autoColumnSize ? 'auto' : undefined" - [style.grid-auto-rows]="section.autoRowSize ? 'auto' : undefined" - [style.backgroundColor]="section.backgroundColor"> + <div + class="dynamic-section" + [style.grid-template-columns]="!section.autoColumnSize ? section.gridColumnSizes : undefined" + [style.grid-template-rows]="!section.autoRowSize ? section.gridRowSizes : undefined" + [style.grid-auto-columns]="section.autoColumnSize ? 'auto' : undefined" + [style.grid-auto-rows]="section.autoRowSize ? 'auto' : undefined" + [style.backgroundColor]="section.backgroundColor"> <ng-container *ngFor="let element of section.elements; let i = index"> <app-element-container [style.min-width.px]="element.width" diff --git a/projects/player/src/app/components/section/section.component.ts b/projects/player/src/app/components/section/section.component.ts index 5b9b4e101f447b7ecb86bdf2296dd2199b23affe..1ebfa6c88e716f575c46068a1dedac7b5263a519 100644 --- a/projects/player/src/app/components/section/section.component.ts +++ b/projects/player/src/app/components/section/section.component.ts @@ -8,7 +8,8 @@ import { Section } from '../../../../../common/models/section'; @Component({ selector: 'app-section', - templateUrl: './section.component.html' + templateUrl: './section.component.html', + styleUrls: ['./section.component.css'] }) export class SectionComponent implements OnInit { @Input() parentForm!: FormGroup;