Topic: [mdbPopover] Popover will not dismiss after click on page (only iPad und Safari)

jespenhain premium asked 5 years ago


Expected behavior In Safari on iPad Popup will dismiss after click on page Actual behavior Unfortunately no. Resources (screenshots, code snippets etc.)

 <button type="button" mdbBtn color="danger" class="waves-light"
      mdbPopover="And here some amazing content. It's very engaging. Right?"
      placement="right"
      mdbPopoverHeader="Dismissible popover"
      [outsideClick]="true"
      triggers="click" mdbWavesEffect>
I will dismiss after click on page


Damian Gemza staff commented 5 years ago

Dear @jespenhain

I have tried to reproduce your problem with the code which you have provided but without success. For me, everything is working fine. I have launched two iPad 2018 Safari emulators on Browserstack, and every time popover is closing after clicking on the page.

Are you sure, that you're using 7.5.4 version? Could you please specify exact version of your iPad and Safari browser? Does this problem exist on another Apple device such as MacBook / iPhone?

Best Regards,

Damian


Damian Gemza staff answered 5 years ago


Dear @jespenhain

This problem will be resolved with the next version of MDB Angular.

Best Regards,

Damian


jespenhain premium answered 5 years ago


Any news about the problem?


Damian Gemza staff commented 5 years ago

Dear @jespenhain

We have debugged this problem, and we have to resolve it on our side.

Please be patient, we'll let you know, when this problem will be resolved.

Best Regards,

Damian


jespenhain premium answered 5 years ago


![Dear damian, here is the screenshot for the problem 1


jespenhain premium answered 5 years ago


Thank for your support. Ich have successfully reproduced the problem with the following code on iPad pro 12.9 2018 Safari 12 emulators on Browserstack.

app.component.html:

<div class="background-view view"><div class="mask gradient d-flex justify-content-center align-items-center flex-column">
<div class="container">
  <div class="row">
    <div class="col-lg-6 white-text text-center text-md-left mt-xl-5 wow fadeInLeft"
         data-wow-delay="0.3s">
      <h1 class="h1-responsive mt-sm-5">Title</h1>
      <hr class="hr-light">
      <p class="mb-sm-4 mb-2">headline</p>
      <mdb-icon fas icon="info-circle" class="info-circle"
                mdbPopover="Dismissible popover" placement="bottom"
                [outsideClick]="true" triggers="click"></mdb-icon>
    </div>
    <div class="col-lg-6 col-xl-5 mt-xl-5 wow fadeInRight">
    </div></div></div></div></div>

app.component-scss:

html, body, header, .view { min-height: 500px; }


Arkadiusz Idzikowski staff commented 5 years ago

Thank you for the code. We managed to reproduce the problem on this example and we will take a closer look at it.


jespenhain premium answered 5 years ago


hmm that's funny that the following code is working fine in the ng-uikit-pro empty project, but the same code is not working with our application.

    `<mdb-icon fas icon="info-circle" class="info-circle"
      mdbPopover="Dismissible popover" placement="bottom"
      [outsideClick]="true" triggers="click"></mdb-icon>`

iPad Air A1474 ios 12.2


Damian Gemza staff commented 5 years ago

Is there a possibility to send me the whole project where your problem is reproducible? You can find me here: d.gemza@mdbootstrap.com



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 7.5.4
  • Device: iPad
  • Browser: Safari
  • OS: IOS
  • Provided sample code: No
  • Provided link: No