No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    QDialog with z-index not working in Iphone

    Framework
    2
    10
    1020
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      Sheejavarghese6 last edited by

      I have created a q-dialog componet with z-index :-1 . It is working in Safari, Chrome and android perfectly.Screenshot_42.png Screenshot_41.png Start button should positioned top of dialog. Anyone has any idea?

      1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman last edited by

        Plugin? If not try wrapping the content in a qcard.

        S 1 Reply Last reply Reply Quote 0
        • S
          Sheejavarghese6 last edited by metalsadman

          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 1 Reply Last reply Reply Quote 0
          • S
            Sheejavarghese6 @metalsadman last edited by

            @metalsadman Please find the below code

            1 Reply Last reply Reply Quote 0
            • metalsadman
              metalsadman @Sheejavarghese6 last edited by metalsadman

              @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.

              1 Reply Last reply Reply Quote 0
              • S
                Sheejavarghese6 last edited by

                @metalsadman I positioned the overlay class like this
                .infoPopUp {
                z-index: 5000;
                position:relative;
                }

                1 Reply Last reply Reply Quote 0
                • S
                  Sheejavarghese6 last edited by

                  @metalsadman .info-click {
                  z-index: 6001;
                  position: relative;
                  } fOR START BUTTON LIKE THIS

                  1 Reply Last reply Reply Quote 0
                  • S
                    Sheejavarghese6 last edited by

                    @metalsadman https://codepen.io/svarghese/pen/VwaJWGo

                    1 Reply Last reply Reply Quote 0
                    • S
                      Sheejavarghese6 last edited by

                      @metalsadman It works with chrome, android and also in safari browser. I am getting this issue only in Iphone

                      metalsadman 1 Reply Last reply Reply Quote 0
                      • metalsadman
                        metalsadman @Sheejavarghese6 last edited by metalsadman

                        @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.

                        1 Reply Last reply Reply Quote 0
                        • First post
                          Last post