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


because of scroll issues in current paper-dropdown-menu implementation want make core-menu fit complete viewport when click on paper-dropdown-menu, tried many things can not figure out , stuck in 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>

you may add following css stylesheet make menu fit 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 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 :)


Comments

Post a Comment

Popular posts from this blog

shopping cart - Page redirect not working PHP -

im trying redirect user when click "empty cart". redirect working "add cart" not "empty cart". ideas great. in main .php file set current url seen $current_url = base64_encode("http://$_server[http_host]$_server[request_uri]"); then below cartaction.php file handles actions such "add cart" , "empty cart" <?php session_start(); include_once 'config.php'; //add item in shopping cart if(isset($_post["add"])) { $product_id = $_post["product_id"]; //product id $return_url = base64_decode($_post["return_url"]); //return url $qty = $_post["qty"]; $product = $mysqli->query("select product_name, unit_price, unit_quantity products product_id = '$product_id'"); $obj = $product->fetch_object(); if(!isset($_session['products'])) { $_session['products'] = array(); } if(array_key_exists($product_id...
Read more

php - How to modify a menu to show sub-menus -

i have custom php menu made person, displays categories menu. however, need display subcategories well. tried adding hierarchical parameter didn't work. hoping assistance! here code: <ul> <?php /* categories wp e-commerce products */ $wpec_product_categories = get_terms( 'wpsc_product_category', 'hide_empty=0&parent=0&exclude=298'); $myarray = array(); foreach($wpec_product_categories $wpec_categories){ $myarray[$wpec_categories->term_id]['name'] = $wpec_categories->name; $myarray[$wpec_categories->term_id]['slug'] = $wpec_categories->slug; $myarray[$wpec_categories->term_id]['term_id'] = $wpec_categories->term_id; } foreach($myarray $wpec_categories1){ $wpec_term_name = $wpec_categories1['name']; $wpec_term_slug = $wpec_categories1['slug']; $wpec_term_id = $wpec_categories1['term_id']; echo '<li> <a href="'.get_page_link(19)....
Read more

python - Installing PyDev in eclipse is failed -

unable read repository @ http://pydev.sf.net/updates/content.xml. sun.security.validator.validatorexception: pkix path building failed: sun.security.provider.certpath.suncertpathbuilderexception: unable find valid certification path requested target i installing pydev in eclipse using python, doesn't install successfully. gives above error. happened? how solve error? i had error when trying install on laptop behind corporate firewall. couldn't tell setup of firewall, not sure of root cause. i got passed error installing pydev eclipse when out behind firewall. another way got around have eclipse on non-firewalled machine, install pydev eclipse, , copy whole eclipse directory non-firewalled machine firewalled machine. there better way, , way fix properly, didn't have time work out firewall doing. this on windows 7 machine (yeah know) not work *nix versions installed through package manager yum or apt.
Read more