From: Sudarshan Kumar <sudarshan.kumar@att.com>
Date: Tue, 28 Jul 2020 09:19:12 +0000 (+0530)
Subject: Multitab-Implemented z-index
X-Git-Tag: 3.4.0~38^2
X-Git-Url: https://gerrit.onap.org/r/gitweb?p=portal.git;a=commitdiff_plain;h=refs%2Fchanges%2F53%2F110653%2F1

Multitab-Implemented z-index

Multitab-Implemented z-index

Issue-ID: PORTAL-936
Change-Id: Ifad254d70516f3ae62c1e5d975723fa85dd7714d
Signed-off-by: Sudarshan Kumar <sudarshan.kumar@att.com>
---

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 65ccf1dc..db0b6afd 100644
--- 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>