From 1d3376560a9357fd8ee35271bcd95b774567b720 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Fri, 28 Jan 2022 09:47:27 +0100
Subject: [PATCH] [player] Fix the display of dynamic elements with negative
z-index
---
.../components/section/section.component.css | 11 +++++++++++
.../components/section/section.component.html | 17 ++++++++---------
.../app/components/section/section.component.ts | 3 ++-
3 files changed, 21 insertions(+), 10 deletions(-)
create mode 100644 projects/player/src/app/components/section/section.component.css
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 000000000..b68278e36
--- /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 7f0976d7a..f92a0653f 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 5b9b4e101..1ebfa6c88 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;
--
GitLab