polymer - Paper-dialog shows up behind drawer-panel when placed in a custom element -
the paper-dialog shows behind drawer-panel when launched custom element.
here's modified "my-greetings.html" custom element polymer-starter-kit show dialog:
<dom-module id="my-greeting"> <style> :host { display: block; } @media (max-width: 600px) { h1.paper-font-display1 { font-size: 24px; } } </style> <template> <paper-dialog id="bigdialog"> <h2>scrolling</h2> <paper-dialog-scrollable> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </paper-dialog-scrollable> <div class="buttons"> <paper-button dialog-dismiss>cancel</paper-button> <paper-button dialog-confirm autofocus>ok</paper-button> </div> </paper-dialog> <paper-icon-button icon="refresh" on-tap="showdialog">show</paper-icon-button> </template> </dom-module> <script> (function() { polymer({ is: 'my-greeting', properties: { greeting: { type: string, value: 'welcome!', notify: true } }, showdialog : function(event) { var dialog = this.$.bigdialog; if (bigdialog) { bigdialog.open(); } } }); })(); </script> how can style dialog appear:
- on top of drawer-panel , centered in body?
- centered in content-panel?
seems paper-dialog not built placing in custom elements. (try adding modal dialog. refs : link)
i'm not sure requirements are, able use dialog element , display above , not obscured panel placing outside of <paper-drawer-panel>.
here's looks like:
i'm not sure if want, this, following illustrates basic example:
<paper-drawer-panel> <paper-header-panel drawer> <paper-toolbar> <div>drawer</div> </paper-toolbar> <paper-menu selected="{{_selected}}"> <paper-item>item 1</paper-item> </paper-menu> </paper-header-panel> <paper-header-panel mode="standard" main> <paper-toolbar> <h1>[[_selected]]</h1> </paper-toolbar> <neon-animated-pages selected="{{_selected}}"> <paper-button raised on-tap="showdialog">show dialog</paper-button> <div>div</div> </neon-animated-pages> </paper-header-panel> </paper-drawer-panel> <my-greeting id="dialog"></my-greeting>
Comments
Post a Comment