How can one display an ionic alert when a element, lets say a div element which is a container for a video element with some button something like this:
<div class="videoContainer" #videoContainer (mouseenter)="onMouseEnter()" (click)="onMouseClick()" (mousemove)="onMouseMove()">
<div class="videoLoading" *ngIf="!cameraServiceReady"></div>
<video autoplay muted playsinline #video id="video" class="videoInsert" [class.videoFlip]="flipScreen"></video>
<canvas #canvas id="canvas" class="canvas" [class.videoFlip]="flipScreen"></canvas>
<div class="buttonContainer" *ngIf="showButtons && cameraServiceReady">
<ion-button (click)="onFullScreen()" fill="clear" size="large" color="light">
<ion-icon name="scan-outline" class="ion-padding"></ion-icon>
</ion-button>
<ion-button (click)="onOpenLanguageSelection()" fill="clear" size="large" color="light">
<ion-icon name="language-outline"></ion-icon>
</ion-button>
<ion-button (click)="toggleFlipScreen()" fill="clear" size="large" color="light">
<ion-icon name="camera-reverse-outline"></ion-icon>
</ion-button>
<ion-button (click)="onOpenCameraSelection()" fill="clear" size="large" color="light">
<ion-icon name="videocam-outline"></ion-icon>
</ion-button>
</div>
</div>
If the container is not in fullscreen then alerts appear over it but if this element is in fullscreen using the Fullscreen Api from html5 (elem.requestFullscreen();) then alert are not appearing in front of the element. I believe this is because the browser puts the z-index of a fullscreen element to its max value which is around 2147483647.
How could we override this? Any suggestions or solution for this?
1 post - 1 participant