Dialog flashes in Edge/IE

General issues related to the use of Metro 4
Post Reply
SassanoW
Posts: 2
Joined: Wed Jul 18, 2018 4:52 pm
Status: Offline

Dialog flashes in Edge/IE

Post by SassanoW » Wed Jul 18, 2018 5:01 pm

First off, I love your framework! Thanks for all the hard work.

I'm having an issue implementing the Dialog. No matter what I do, the dialog appears for a fraction of a second and then disappears. I've gone through the example several times and am pretty sure I'm doing it correctly. I even isolated the example to it's own page with nothing else in the html. I know that there are other components that require a slight change to work around IE/Edge bugs but the Dialog page does not mention any changes. Can you tell me what I'm doing wrong?

Code: Select all

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css" />
</head>
<body>
    <form id="form1" runat="server">
        <div id="demoDialog1" class="dialog" data-role="dialog" style="left: 762px; top: 100%; width: 480px; height: auto; visibility: hidden;">
            <div class="dialog-title">Use Windows location service?</div>
            <div class="dialog-content">
                Bassus abactors ducunt ad triticum.
        A fraternal form of manifestation is the bliss.
            </div>
            <div class="dialog-actions">
                <button class="button js-dialog-close">Disagree</button>
                <button class="button primary js-dialog-close">Agree</button>
            </div>
        </div>
        <button class="button" onclick="Metro.dialog.open('#demoDialog1')">Open dialog</button>
    </form>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
</body>
</html>

User avatar
olton
Site Admin
Posts: 69
Joined: Mon Apr 09, 2018 6:19 pm
Location: Kiev, Ukraine
Status: Offline

Post by olton » Wed Jul 18, 2018 6:16 pm

add type="button" to the dialog open button

Code: Select all

<button class="button" type="button" onclick="Metro.dialog.open('#demoDialog1')">Open dialog</button>

SassanoW
Posts: 2
Joined: Wed Jul 18, 2018 4:52 pm
Status: Offline

Post by SassanoW » Wed Jul 18, 2018 6:20 pm

Perfect. That fixed the issue! You may want to update your example to include that.
Thanks for your help and all your great work.

Post Reply