QDialog with z-index not working in Iphone
-
I have created a q-dialog componet with z-index :-1 . It is working in Safari, Chrome and android perfectly.
Start button should positioned top of dialog. Anyone has any idea?
-
Plugin? If not try wrapping the content in a qcard.
-
Dialog Component
<template> <div class="infoPopUp"> <q-dialog v-model="introDataTraining.showInfo" persistent transition-show="fade" transition-hide="fade" position="bottom" v-if="introDataTraining.currentStep != -1" > <div :class="positionPopup"> <div class="row"> <div class="col-3"> <img src="../../statics/maskottNew.png" class="choice-popup__img" /> </div> <div class="col-9"> <div class="choice-popup__bubble"> <p class="choice-popup__text text-body3"> <span v-html="getText"></span> </p> </div> </div> </div> <div v-if="showOkButton" class="choice-popup__btn-row"> <div @click="nextStep()" class="btn--pos-white choice-popup__btn--1">{{ continueText }}</div> </div> </div> </q-dialog> </div> </template>
-
@metalsadman Please find the below code
-
@Sheejavarghese6 and what does positionPopup do? Don’t have iOS, but I think best put a reproduction codepen, fork the codepen from docs at tools menu, and reproduce it there so peeps can check, ty.
-
@metalsadman I positioned the overlay class like this
.infoPopUp {
z-index: 5000;
position:relative;
} -
@metalsadman .info-click {
z-index: 6001;
position: relative;
} fOR START BUTTON LIKE THIS -
-
@metalsadman It works with chrome, android and also in safari browser. I am getting this issue only in Iphone
-
@Sheejavarghese6 https://codepen.io/rstoenescu/pen/VgQbdx fork this codepen. but yeah try my suggestion first, wrapping the main content in a QCard as QDialog has a transparent background by default.