CODEWITHSUNDEEP
csspolymerpolymer-1.0paper-elements
Let Me Tink About It
Let Me Tink About It

Reputation: 16102

Polymer 1.x: Formatting <paper-menu-button>

I have paper-button element ...

This JSFiddle shows the target result I seek for the button hover effect. (i.e., the entire button fills the entire height of the toolbar and, without margin, needs to highlight when hovered).

...but I need paper-menu-button element.

The above was using a <paper-button>. But I really want to use a <paper-menu-button>. This JSFiddle is the best attempt I have so far. (Notice how there is white space — that doesn't highlight on hover — both above and below the button.)

Question

Please help me format the second JSFiddle to look (on hover) like the first JSFiddle. (I.e., no white space. Fills entire height of toolbar.)

Please provide a working JSFiddle or JSBin in your answer.

Note: I used the x character preceding many of the CSS style attributes as a quick way to comment out attributes I tried already but didn't work.

Code

... this effect is the target ... http://jsfiddle.net/L3bqphwe/2/ 
<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <base href="http://element-party.xyz/">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="all-elements.html">
  <style>
    paper-toolbar *:last-child {
        margin-right: -8px;
    }  
  </style>
</head>
<body class="fullbleed layout vertical">
  <paper-header-panel>
    <paper-toolbar>
      <span>Header</span>
      <span class="flex"></span>
      <x-element></x-element>
    </paper-toolbar>
    <div>Content goes here...</div>
  </paper-header-panel>   
<dom-module id="x-element">
  <template>
    <style>
      :host {
        --paper-button: {
          @apply(--layout-vertical);
          @apply(--layout-center-center);
        };
        --paper-menu-button: {
          @apply(--layout-vertical);
          @apply(--layout-center-center);
          height: 100%;
        };
        border-left: 1px solid white;
        height: 100%;
      }
      paper-menu-button {
        margin: 0;
        padding: 0;
        height: 100%;
        xborder-left: 1px solid var(--paper-grey-600);
        --paper-menu-button: {
          @apply(--layout-vertical);
          @apply(--layout-center-center);
          @xapply(--height-100%);
          xheight: 100%;
        };        
      }
      paper-button:hover {
        background: white;
        color: black;
        font-weight: bold;
      }
      paper-button {
        --paper-button: {
          @apply(--layout-vertical);
          @apply(--layout-center-center);
        };
        color: white;
        height: 100%;
        border-radius: 0;
        margin:0;
        -o-transition      : .25s;
        -ms-transition     : .25s;
        -moz-transition    : .25s;
        -webkit-transition : .25s;
        transition         : .25s;
      }
    </style>
  <paper-button>Button</paper-button>
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element'
      });
    })();
  </script>
</dom-module>
</body>
</html>
... what I have so far ... needs help ... http://jsfiddle.net/L3bqphwe/3/ 
<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <base href="http://element-party.xyz/">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="all-elements.html">
  <style>
    paper-toolbar *:last-child {
        margin-right: -5px;
    }  
  </style>
</head>
<body class="fullbleed layout vertical">
  <paper-header-panel>
    <paper-toolbar>
      <span>Header</span>
      <span class="flex"></span>
      <x-element></x-element>
    </paper-toolbar>
    <div>Content goes here...</div>
  </paper-header-panel>   
<dom-module id="x-element">
  <template>
    <style>
      :host {
        --paper-button: {
          @apply(--layout-vertical);
          @apply(--layout-center-center);
        };
        --paper-menu-button: {
          @apply(--layout-vertical);
          @apply(--layout-center-center);
          height: 100%;
        };
        border-left: 1px solid white;
        height: 100%;
      }
      paper-menu-button {
        margin: 0;
        padding: 0;
        height: 100%;
        xborder-left: 1px solid var(--paper-grey-600);
        --paper-menu-button: {
          @apply(--layout-vertical);
          @apply(--layout-center-center);
          @xapply(--height-100%);
          xheight: 100%;
        };        
      }
      paper-button:hover {
        background: white;
        color: black;
        font-weight: bold;
      }
      paper-button {
        --paper-button: {
          @apply(--layout-vertical);
          @apply(--layout-center-center);
        };
        color: white;
        height: 100%;
        border-radius: 0;
        margin:0;
        -o-transition      : .25s;
        -ms-transition     : .25s;
        -moz-transition    : .25s;
        -webkit-transition : .25s;
        transition         : .25s;
      }
    </style>
    <paper-menu-button>
      <paper-button class="dropdown-trigger">Button</paper-button>
      <paper-menu class="dropdown-content">
        <paper-item>Share</paper-item>
        <paper-item>Settings</paper-item>
        <paper-item>Help</paper-item>
      </paper-menu>
    </paper-menu-button>
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element'
      });
    })();
  </script>
</dom-module>
</body>
</html>

Upvotes: 1

Views: 506

Answers (2)

orgertot
orgertot

Reputation: 197

The problem is that you give 

height: 100%

to paper-button.x-element

but the parent is limiting this height.

So simply add 

#trigger {
  height: 100%;
}

#trigger or .style-scope.paper-menu-button

Upvotes: 1

Let Me Tink About It
Let Me Tink About It

Reputation: 16102

Working code from accepted answer ... jsbin.com/bisanocehu/1/edit?html,output 

<!DOCTYPE html>
<html>  
<head>
  <meta charset="utf-8">
  <title>Polymer Bin</title>
  <base href="http://element-party.xyz/">
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="all-elements.html">
  <style>
    paper-toolbar *:last-child {
        margin-right: -5px;
    }
    #trigger {
       height: 100%;
    }
  </style>
</head>
<body class="fullbleed layout vertical">
  <paper-header-panel>
    <paper-toolbar>
      <span>Header</span>
      <span class="flex"></span>
      <x-element></x-element>
    </paper-toolbar>
    <div>Content goes here...</div>
  </paper-header-panel>   
<dom-module id="x-element">
  <template>
    <style>
      :host {
        --paper-button: {
          @apply(--layout-vertical);
          @apply(--layout-center-center);
        };
        --paper-menu-button: {
          @apply(--layout-vertical);
          @apply(--layout-center-center);
          height: 100%;
        };
        border-left: 1px solid white;
        height: 100%;
      }
      paper-menu-button {
        margin: 0;
        padding: 0;
        height: 100%;
        xborder-left: 1px solid var(--paper-grey-600);
        --paper-menu-button: {
          @apply(--layout-vertical);
          @apply(--layout-center-center);
          @xapply(--height-100%);
          xheight: 100%;
        };        
      }
      paper-button:hover {
        background: white;
        color: black;
        font-weight: bold;
      }
      paper-button {
        --paper-button: {
          @apply(--layout-vertical);
          @apply(--layout-center-center);
        };
        color: white;
        height: 100%;
        border-radius: 0;
        margin:0;
        -o-transition      : .25s;
        -ms-transition     : .25s;
        -moz-transition    : .25s;
        -webkit-transition : .25s;
        transition         : .25s;
      }
    </style>
    <paper-menu-button>
      <paper-button class="dropdown-trigger">Button</paper-button>
      <paper-menu class="dropdown-content">
        <paper-item>Share</paper-item>
        <paper-item>Settings</paper-item>
        <paper-item>Help</paper-item>
      </paper-menu>
    </paper-menu-button>
  </template>
  <script>
    (function(){
      Polymer({
        is: 'x-element'
      });
    })();
  </script>
</dom-module>
</body>
</html>

Upvotes: 0

Related Questions