Multitab-Implemented z-index
Issue-ID: PORTAL-936
Change-Id: Ifad254d70516f3ae62c1e5d975723fa85dd7714d
Signed-off-by: Sudarshan Kumar <sudarshan.kumar@att.com>
+ <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)"
<div style="display: flex; flex-direction:column">
<mat-tab-group [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)"
-
-
-
-
- <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>