[mdbPopover] Popover will not dismiss after click on page (o


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

jespenhain pro premium asked 7 days 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 6 days 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


jespenhain pro premium answered 6 days 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 days 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


jespenhain pro premium answered 5 days 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 2 days 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 pro premium answered 5 days ago

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


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: Angular
  • MDB Version: 7.5.4
  • Device: iPad
  • Browser: Safari
  • OS: IOS
  • Provided sample code: No
  • Provided link: No
Tags