CODEWITHSUNDEEP
polymer
Gert Cuykens
Gert Cuykens

Reputation: 7155

How can I make core-menu fit the compleet viewport?

Because of scroll issues in the current paper-dropdown-menu implementation I want to make core-menu fit the complete viewport when you click on paper-dropdown-menu, tried many things but can not figure it out and I am stuck in the shadow dom space.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes" />
  <title>Polymer</title>
  <script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents.js"></script>
  <link href="https://www.polymer-project.org/0.5/components/polymer/polymer.html" rel="import" />
  <link href="https://www.polymer-project.org/0.5/components/core-elements/core-elements.html" rel="import" />
  <link href="https://www.polymer-project.org/0.5/components/paper-elements/paper-elements.html" rel="import" />
  <link rel='stylesheet' href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold&amp;lang=en'>
  <style shim-shadowdom>
    body {
      font-family: 'RobotoDraft', sans-serif;
    }
    :unresolved {
      display: flex;
      justify-content: flex-start;
      background: rgba(255, 255, 255, 0.5);
      border: 2px dashed #ccc;
      border-radius: 5px;
      box-sizing: border-box;
    }
    :unresolved:after {
      padding: 15px;
      content: 'loading...';
      color: #ccc;
    }
    paper-dropdown-menu {
      border: 2px solid red;
      border-radius: 5px;
      box-sizing: border-box;
    }
  </style>
</head>

<body fullbleed layout vertical>
  <template is="auto-binding">
    <paper-dropdown-menu label="method">
      <paper-dropdown class="dropdown">
        <core-menu class="menu" fullbleed style="margin:0; padding:0;">
          <template repeat="{{ method }}">
            <paper-item>{{}}</paper-item>
          </template>
        </core-menu>
      </paper-dropdown>
    </paper-dropdown-menu>
  </template>
  <script>
    var t = document.querySelector('body > template')
     t.method = [1, 2, 3, 4]
  </script>
</body>

</html>

Upvotes: 0

Views: 124

Answers (1)

Zesky
Zesky

Reputation: 524

You may add the following CSS to your stylesheet to make the menu to fit the viewport

html /deep/ paper-dropdown {
    width: 100%;
}

html /deep/ paper-dropdown #scroller{
    width: 100%;
}

.menu{
  width: 100%;
  margin:0; 
  padding:0;
}

You may find full example as shown below:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes" />
  <title>Polymer</title>
  <script src="https://www.polymer-project.org/0.5/components/webcomponentsjs/webcomponents.js"></script>
  <link href="https://www.polymer-project.org/0.5/components/polymer/polymer.html" rel="import" />
  <link href="https://www.polymer-project.org/0.5/components/core-elements/core-elements.html" rel="import" />
  <link href="https://www.polymer-project.org/0.5/components/paper-elements/paper-elements.html" rel="import" />
  <link rel='stylesheet' href='//fonts.googleapis.com/css?family=RobotoDraft:regular,bold&amp;lang=en'>
  <style shim-shadowdom>
    body {
      font-family: 'RobotoDraft', sans-serif;
    }
    :unresolved {
      display: flex;
      justify-content: flex-start;
      background: rgba(255, 255, 255, 0.5);
      border: 2px dashed #ccc;
      border-radius: 5px;
      box-sizing: border-box;
    }
    :unresolved:after {
      padding: 15px;
      content: 'loading...';
      color: #ccc;
    }
    paper-dropdown-menu {
      border: 2px solid red;
      border-radius: 5px;
      box-sizing: border-box;
    }

    html /deep/ paper-dropdown {
        width: 100%;
    }

    html /deep/ paper-dropdown #scroller{
        width: 100%;
    }

    .menu{
      width: 100%;
      margin:0; 
      padding:0;
    }


  </style>
</head>

<body fullbleed layout vertical>
  <template is="auto-binding">
    <paper-dropdown-menu label="method">
      <paper-dropdown class="dropdown" layout vertical>
        <core-menu class="menu" fullbleed layout vertical>
          <template repeat="{{ method }}">
            <paper-item>{{}}</paper-item>
          </template>
        </core-menu>
      </paper-dropdown>
    </paper-dropdown-menu>
  </template>
  <script>
    var t = document.querySelector('body > template')
     t.method = [1, 2, 3, 4]
  </script>
</body>

</html>

Hope this help :)

Upvotes: 1

Related Questions