Merge "Multitab-Implemented z-index"

diff --git a/portal-FE-common/src/app/layout/components/tabbar/tabbar.component.html b/portal-FE-common/src/app/layout/components/tabbar/tabbar.component.html
index 65ccf1d..db0b6af 100644 (file)
--- a/portal-FE-common/src/app/layout/components/tabbar/tabbar.component.html
+++ b/portal-FE-common/src/app/layout/components/tabbar/tabbar.component.html
@@ -35,6 +35,17 @@
 
   -->
 
+  <style>
+    .apps-tab {
+     position: absolute;
+     width: 100%;
+     height: 100%;
+     top: 100px;
+     left: 5px;
+     background-color: white;
+   }
+ </style>
+
   <div style="display: flex; flex-direction:column">
 
       <mat-tab-group [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)"
@@ -79,19 +90,15 @@
 
       </mat-tab-group>
 
-
-
-
-
-        <div *ngFor="let tab of tabs; let index = index"
-          [style.display]='tab.active? "inline" : "none"'
-          [style.position]='tab.active? "static" : "absolute"'
-          [style.height]='tab.active? "calc(100vh)" : "calc(0vh)"'>
-
-          <iframe id="tabframe-{{tab.label.split(' ').join('-')}}-{{index}}" scrolling='yes' frameBorder='0' width='100%'
-            scrolling='yes' frameBorder='0' width='100%' height='90%' [src]='tab.url'></iframe>
-
-        </div>
-
-
-    </div>
+      <div class="apps-tab" *ngFor="let tab of tabs; let index = index"
+          [style.display]='"inline"'
+          [style.position]='"absolute"'
+          [style.height]='"calc(100vh)"'
+          [style.z-index]="tab.active? 1 : 0"
+          [style.opacity]="tab.active? 1 : 0"
+      >
+          <iframe id="tabframe-{{tab.label.split(' ').join('-')}}-{{index}}" scrolling='yes' frameBorder='0'
+            scrolling='yes' frameBorder='0' width='100%' height='90%' [src]='tab.url'>
+          </iframe>
+      </div>
+</div>