The paper-header-panel or the paper-drawer-panel won't take the whole top edges of the browser window

问题

Hello I am studying Google's Polymer I followed their guide about Responsive Material Design Layouts But I just noticed that the paper-drawer-panel won't take the whole edge of the top part of the browser window. It has a bit of a gap.

Here's my code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Layout</title>

    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
    <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
    <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
    <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
    <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
    <link rel="import" href="bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
    <!-- 2. Use an HTML Import to bring in some elements. -->
    <link rel="import" href="bower_components/paper-button/paper-button.html">
    <link rel="import" href="bower_components/paper-input/paper-input.html">

</head>

<body class="fullbleed vertical layout">

    <paper-drawer-panel class="flex">

        <paper-header-panel drawer>
            <paper-toolbar>
                <div>Application</div>
            </paper-toolbar>
            <div> Drawer content... </div>
        </paper-header-panel>

        <paper-header-panel main>

            <paper-toolbar>
                <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
                <div>Title</div>
            </paper-toolbar>

            <div> Main content... </div>

        </paper-header-panel>

    </paper-drawer-panel>

</body>

</html>

The code will render this image as you can see there's a bit of a gap in the edges.

Am I missing something here? What's wrong with my code? Your help and explanation will greatly appreciated. Thanks! :)

回答1:

You are missing the import of paper-styles.html

来源：https://stackoverflow.com/questions/36103073/the-paper-header-panel-or-the-paper-drawer-panel-wont-take-the-whole-top-edges

标签

html

polymer

material-design

polymer-1.0