Dialog not working with [config]= option in Safari

Topic: Dialog not working with [config]= option in Safari

Teixeira priority asked 4 years ago

Expected behavior

The dialog opens on the screen

Actual behavior

The dialog does not open on the screen

Resources (screenshots, code snippets etc.)

At https://mdbootstrap.com/docs/angular/modals/generator/

Choose : Backdrop: Yes Dialog Size : SMALL Dialog Position: Bottom Right

Click button "Launch Demo Modal"

The dialog opens fine

Change: Backdrop: No

Click button "Launch Demo Modal"

The dialog does not open fine (it appears briefly then disappears. Subsequent clicking on the "Launch Demo Modal" button does nothing)

Arkadiusz Idzikowski staff commented 4 years ago

Does this problem occurs only in the documentation live preview or it doesn't work correctly in your Angular project as well?

Add comment

Teixeira priority answered 4 years ago

0 0 Best answer

<p>Here is the html which runs a sample dialog.</p>

<p>Note that the dialog opens in the bottom right of the window.</p>

<pre class="prettyprint"><code><div [config]="{backdrop: false, ignoreBackdropClick: true}" aria-hidden="true"

mdbModal class="modal fade right" tabindex="-1" role="dialog">

<b>Label</b>

</div>

<div>

<button (click)="uploadStatusModalService.hideUploadModal()" aria-label="Close" class="close btn-d" data-dismiss="modal"

type="button">

<span aria-hidden="true" class="white-text">&times;</span>

</button>

</div>

Modal Body

</div>

</div>
</code></pre>

<p>Here is what I have found in summary:</p>

<pre class="prettyprint"><code><div [config]="{backdrop: false, ignoreBackdropClick: true}" aria-hidden="true"

- Works fine in Safari

<div [config]="{backdrop: false, ignoreBackdropClick: false}” aria-hidden="true"

- Works fine in Safari

<div [config]="{backdrop: true, ignoreBackdropClick: false}” aria-hidden="true"

- Works fine in Safari

<div [config]="{backdrop: true, ignoreBackdropClick: true}” aria-hidden="true"

-  Does not work in Safari (opens in extreme top-right)
</code></pre>

<p>Thanks!</p>

Please insert min. 20 characters.

Here is the html which runs a sample dialog.

Note that the dialog opens in the bottom right of the window.

<div [config]="{backdrop: false, ignoreBackdropClick: true}" aria-hidden="true"

     mdbModal class="modal fade right" tabindex="-1" role="dialog">

  <div class="modal-dialog modal-side modal-bottom-right" role="document">

    <div class="modal-content">

      <div class="modal-header">

        <div class="d-flex justify-content-between w100">

          <div id="myModalLabel">

            <b>Label</b>

          </div>

          <div>

            <button (click)="uploadStatusModalService.hideUploadModal()" aria-label="Close" class="close btn-d" data-dismiss="modal"

                    type="button">

              <span aria-hidden="true" class="white-text">&times;</span>

            </button>

          </div>

        </div>

      </div>

      <div class="modal-body">

        Modal Body

      </div>

    </div>

  </div>

</div>

Here is what I have found in summary:

<div [config]="{backdrop: false, ignoreBackdropClick: true}" aria-hidden="true"

- Works fine in Safari



<div [config]="{backdrop: false, ignoreBackdropClick: false}” aria-hidden="true"

- Works fine in Safari



<div [config]="{backdrop: true, ignoreBackdropClick: false}” aria-hidden="true"

- Works fine in Safari



<div [config]="{backdrop: true, ignoreBackdropClick: true}” aria-hidden="true"

-  Does not work in Safari (opens in extreme top-right)

Thanks!

Arkadiusz Idzikowski staff commented 4 years ago

Thank you for the detailed description. We will take a closer look at that and let you know what we found.

Add comment

Teixeira priority answered 4 years ago

0 0 Best answer

Hi Arkadiusz,

Here is the html which runs a sample dialog.

Note that the dialog opens in the bottom right of the window.

Label × Modal Body

Here is what I have found in summary:

Thanks! - Mark

Arkadiusz Idzikowski staff commented 4 years ago

It looks like you didn't add code to your answer, could you fix that?

Teixeira priority commented 4 years ago

Hi - I sent an email to your support address. Can you check that account - that email has code, which for some reason I could not get to post here.

Add comment

Write

Create snippet

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: Priority
Premium support: Yes
Technology: MDB Angular
MDB Version: 8.0.0
Device: Mac OS 27 inch iMac
Browser: Safari Version 12.1.2 (13607.3.1
OS: 10.13.6
Provided sample code: No
Provided link: Yes

Teixeira

65Support score
6Questions 5Answers 2Snippets