Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

Using scroll header panel together with dialog will cause backdrop to cover up dialog #1656

Closed
derek1906 opened this issue May 29, 2015 · 1 comment
Closed

Using scroll header panel together with dialog will cause backdrop to cover up dialog #1656

derek1906 opened this issue May 29, 2015 · 1 comment
Labels
needs move

Comments

@derek1906
Copy link

I was trying out Polymer and I found that by using paper-scroll-header-panel and paper-dialog in the same page will cause the backdrop of the dialog to cover up the dialog itself, making the dialog not clickable:

image

A simple page that reproduces the problem:

<head>
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="bower_components/paper-button/paper-button.html">
    <link rel="import" href="bower_components/paper-styles/paper-styles.html">
    <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
    <link rel="import" href="bower_components/paper-dialog/paper-dialog.html">
    <link rel="import" href="bower_components/neon-animation/neon-animations.html">
    <link rel="import" href="bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">

    <style type="text/css">
        body{
            background-color: #f9f9f9;
            color: #212121;
        }

        paper-scroll-header-panel paper-toolbar .title{
            font-size: 40px;
            margin-left: 60px;
        }

        .content{
            padding: 32px 64px;
        }
    </style>
    <script type="text/javascript">
        window.addEventListener("load", function(){
            document.querySelector("#dialog").open();
        });
    </script>
</head>
<body class="fullbleed layout vertical">
    <paper-scroll-header-panel class="flex" condenses>
        <paper-toolbar class="tall">
            <div class="bottom title">Title</div>
        </paper-toolbar>
        <div class="content">
            <p>Lorem Ipsum</p>
        </div>
    </paper-header-panel>

    <paper-dialog id="dialog" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop modal>
        <h2>Title</h2>
        <p class="dialog-content">Description</p>
        <div class="buttons">
            <paper-button dialog-dismiss>Cancel</paper-button>
            <paper-button dialog-confirm>Accept</paper-button>
        </div>
    </paper-dialog>
</body>

As soon as the scroll header panel is removed, the modal works perfectly. It seems the header panel is the problem here. Tested on Polymer v1.0.
@derek1906
Copy link
Author

Apparently there's a typo in the code (miamatched tags) causing this to happen.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
needs move
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@kevinpschaaf @derek1906