Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom

[MdDialog] not showing with IE 11 #1317

Closed
neclepsio opened this issue Dec 19, 2017 · 3 comments
Closed

[MdDialog] not showing with IE 11 #1317

neclepsio opened this issue Dec 19, 2017 · 3 comments
Labels
bug

Comments

@neclepsio
Copy link

To get my test page working in IE 11 I had to polyfill Promise, Object.values and Array.includes. I also had to style html, body, and md-app to have 100% height.

I could not find a way to show a dialog with the same code as the documentation (which is working for me on Chrome): no error is shown on the console, but its height is 0.
@akomarovsky
Copy link
Contributor

fixed a workaround for that. Use:
.md-dialog { display: block !important; }

@neclepsio
Copy link
Author

I confirm it shows with the workaround, but width and height are wrong. The following is the code I use, please ask if you need polyfills. Thank you.

<!DOCTYPE html>
<!-- saved from url=(0014)about:internet -->

<html>
    <head>
        <meta charset="utf-8">
        <meta content="width=device-width,initial-scale=1,minimal-ui" name="viewport">
        <link rel="stylesheet" href="fonts/material-icons/material-icons.css">
        <link rel="stylesheet" href="fonts/roboto/roboto-fontface.css">
        <link rel="stylesheet" href="vue-material.css">
        <link rel="stylesheet" href="theme/default.css">
        
        <!-- IE11 polyfill -->
        <script src="promise.min.js"></script>
        <script src="polyfills.js"></script>
        
        <style>
            html, body, #app, .md-app { height:100%; } 
            .md-dialog { display: block !important; }
        </style>
    </head>

    <body>
        <div id="app">
        
<md-app>
  <md-app-content>
    <md-dialog :md-active.sync="showDialog">
      <md-dialog-title>Preferences</md-dialog-title>

      <md-tabs md-dynamic-height>
        <md-tab md-label="General">
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam mollitia dolorum dolores quae commodi impedit possimus qui, atque at voluptates cupiditate. Neque quae culpa suscipit praesentium inventore ducimus ipsa aut.</p>
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam mollitia dolorum dolores quae commodi impedit possimus qui, atque at voluptates cupiditate. Neque quae culpa suscipit praesentium inventore ducimus ipsa aut.</p>
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam mollitia dolorum dolores quae commodi impedit possimus qui, atque at voluptates cupiditate. Neque quae culpa suscipit praesentium inventore ducimus ipsa aut.</p>
        </md-tab>

        <md-tab md-label="Activity">
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam mollitia dolorum dolores quae commodi impedit possimus qui, atque at voluptates cupiditate. Neque quae culpa suscipit praesentium inventore ducimus ipsa aut.</p>
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam mollitia dolorum dolores quae commodi impedit possimus qui, atque at voluptates cupiditate. Neque quae culpa suscipit praesentium inventore ducimus ipsa aut.</p>
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam mollitia dolorum dolores quae commodi impedit possimus qui, atque at voluptates cupiditate. Neque quae culpa suscipit praesentium inventore ducimus ipsa aut.</p>
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam mollitia dolorum dolores quae commodi impedit possimus qui, atque at voluptates cupiditate. Neque quae culpa suscipit praesentium inventore ducimus ipsa aut.</p>
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam mollitia dolorum dolores quae commodi impedit possimus qui, atque at voluptates cupiditate. Neque quae culpa suscipit praesentium inventore ducimus ipsa aut.</p>
        </md-tab>

        <md-tab md-label="Account">
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam mollitia dolorum dolores quae commodi impedit possimus qui, atque at voluptates cupiditate. Neque quae culpa suscipit praesentium inventore ducimus ipsa aut.</p>
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam mollitia dolorum dolores quae commodi impedit possimus qui, atque at voluptates cupiditate. Neque quae culpa suscipit praesentium inventore ducimus ipsa aut.</p>
        </md-tab>
      </md-tabs>

      <md-dialog-actions>
        <md-button class="md-primary" @click="showDialog = false">Close</md-button>
        <md-button class="md-primary" @click="showDialog = false">Save</md-button>
      </md-dialog-actions>
    </md-dialog>

    <md-button class="md-primary md-raised" @click="showDialog = true">Show Dialog</md-button>
  </md-app-content>
</md-app>

        </div>
        
        <script src="vue.js"></script>
        <script src="vue-material.js"></script>
        <!--script src="test.js"></script-->

        <script>
            Vue.use(VueMaterial.default);
            var app = new Vue({ 
                el: "#app",
                data: function() {return {
                    menuVisible: false,
                    showDialog: false,
                }},
            });
        </script>
    </body>
</html>

@Samuell1
Copy link
Member

Changing display flex to block can broke other things in modal. This looks like issue with min, max height

@Samuell1 Samuell1 added the bug label Dec 25, 2017
@Samuell1 Samuell1 changed the title Dialog not showing with IE 11 [MdDialog] not showing with IE 11 Dec 25, 2017
@Samuell1 Samuell1 mentioned this issue Dec 28, 2017
Merged
@tachiaus tachiaus mentioned this issue Dec 29, 2017
Closed
# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@neclepsio @Samuell1 @akomarovsky