Does anybody have any advice for fixing the problem of a modal appearing behind its backdrop?
So far, I have tried making sure I have all the necessary imports (including <paper-dialog-scrollable>
).
I also tried a "hack-fix" (suggested by someone) involving setting z-index: auto
in the css of paper-header-panel
. Neither works.
It's worth noting that the <paper-dialog>
tag works just fine. Until I add the modal
attribute.
Any ideas?
Similar issuesAppearing around the internet are this issue report and this Stackoverflow question.
my-element.html<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html" />
<link rel="import" href="../../../bower_components/paper-dialog/paper-dialog.html">
<dom-module id="example-element">
<template>
<!-- Dialog -->
<paper-dialog id="contactDialog" modal>
<h2>Login</h2>
<paper-dialog-scrollable>
<form id="contact-form" autofocus>
<paper-input autofocus id="name" label="Your Name"></paper-input>
<paper-input id="email" label="Email Address"></paper-input>
</form>
</paper-dialog-scrollable>
<div class="buttons">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button dialog-confirm>Accept</paper-button>
</div>
</paper-dialog>
<!-- Button -->
<paper-button id="login"
data-dialog="contactDialog"
on-tap="openDialog">Login</paper-button>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'example-element',
properties: {...},
openDialog: function(){
this.$.contactDialog.open();
}
});
})();
</script>