Search code examples
htmlcssresponsive-designpolymer-1.0paper-elements

Polymer paper-drawer-panel Responsive design

In my code the paper drawer panel collapses while re sizing the browser but when i try it in mobile phone it do not collapses.

<!DOCTYPE html>
<html>
<head>
    <title>PolyPolymer</title>
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <link rel="import" href="elements.html">
</head>
<body fullblead layout vertical fit>
    <paper-drawer-panel responsive-width="800px">
        <paper-header-panel flex drawer>
            <paper-toolbar>
            <div class="title middle">Heading</div>
            </paper-toolbar>
            <div class="bottom row fit bottom">
            </div>
        </paper-header-panel>
        <paper-header-panel flex main>
        <paper-toolbar>
          <paper-ripple center></paper-ripple>
          <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
            <div flex class="indent title">Heading</div>
            </paper-toolbar>                
            <div>
             page content
            </div>
        </paper-header-panel>
    </paper-drawer-panel>
</body>
</html>

I am using polymer 1.0

Solution

  • This is something i was struggling with for a while , what worked for me was putting this snippet in the head.

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    I hope it works for you like it did for me :)