An icon button that opens a drop-down menu for use in toolbars, etc.
This element is compatible with Polymer 0.5 and lower only, and will be deprecated.
You can check out a similar 0.8-compatible version of this element at https://github.com/polymerelements/paper-menu-button
The following setup causes the arrow key navigation of paper menu to not work when inside a button. I believe the important points are:
Turning off shadow DOM causes it to work. Moving the button to the top level causes it to work.
index.html
<html>
<head>
<title>broken-menu-test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<script>
window.Polymer = window.Polymer || {};
window.Polymer.dom = 'shadow';
</script>
<link rel="import" href="my-element.html">
</head>
<body>
<my-element></my-element>
</body>
</html>my-element.html
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
<dom-module id="my-element">
<template>
<paper-menu-button>
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-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>
</dom-module>
<script>
(function() {
Polymer({
is: 'my-element',
});
})();
</script>paper-dropdown-menu allows you to set text and background color with:
paper-dropdown-menu::shadow #dropdown {
color: purple;
background-color: #eee;
}
ALSO, paper-menu-button allows you to set the text and background color similarly:
paper-menu-button::shadow #menu {
color: lightpink;
background-color: lightgreen;
}
PROPOSE:
align the shadow element id ('menu' is preferable to 'dropdown' since it's the common word in the name of both elements)
remove this part of the documentation, as it is not necessary (user can currently use color property with the #menu selector as shown above) and doesn't conform to class names of other paper elements:
paper-menu-button::shadow .paper-menu-button-overlay-bg { background: green; }
When using the default halign of 'auto', transition="paper-menu-button-transition-top-{{halign}}{{slow ? '-slow' : ''}}" no longer maps to a valid transition
Using paper-items as child works, but <div> do not. The paper-shadow overlays the drop down and prevents items from the <div> from being selectable.
I was able to solve this by putting a z-index: -1; on paper-shadow.
or: max-width of core-menu#menu gets smaller on repeated open/close only if no scroll bar present and only if very close to the right edge of the window.
A confusing bug. I have a core-toolbar at the top of a 'body style="overflow: auto;"'. It includes some 'paper-menu-button's.
When there is no scroll bar present, it looks normal (except for bug #33). But as soon as the scroll bar is present, the (auto calculated?) max-width value of core-menu#menu becomes smaller and smaller the more often you open and close the menu. This is only the case for the very right 'paper-menu-button' right next to the scroll bar. In fact, this odd behavior depends on the distance to the right edge of the window. The very same with a larger margin-right is working fine.
Normal menu when distance to right edge of window is large enough or when scroll bar is present:
Menu getting narrower and narrower when too close to the edge and no scroll bar is present:
I've noticed since upgrading to 0.4.2 that the content inside of the menu displays before the overlay
http://jsbin.com/zodoxi/2/edit
Check the screenshot with this example when it is open near left border of the browser
I'm developing a Dart application that has some paper-menu-button elements. They are working fine: when you click the menu button, it shows the menu items and they can handle events.
The problem occurs in two situations:
1 - when you click outside the menu items area (after clicking the menu trigger, of course);
2 - when you click a menu item that has no handler.
This is the error:
Uncaught RangeError: Maximum call stack size exceeded (:3737)
I think that this is not enough information, but I need further instructions on how to track the error more properly.
Per the instructions in the documentation, I'm using this CSS to try to style the ripple of a paper-menu-button, but not getting any results:
paper-menu-button::shadow .paper-menu-button-overlay-ink {
background: blue;
}
Also there's a typo in the docs: only a single colon before the shadow pseudo-element, should be two.
Before being opened core-popup-menu has a display of none. After opening the menu and closing it, the display remains in block even though the menu is not longer visible. This blocks nearby buttons/etc that the popup had overlapped when open.
The documentation shows DIV elements as children of a paper-menu-button, but DIVs will not work, they need to be paper-item
HTML
<paper-menu-button-overlay relatedTarget="[[ctrl.angular-variable]]" halign="center">
Hello World
</paper-menu-button-overlay>
Calling .toggle() method on this polymer element causes an error as this.target.cachedSize is empty. Adding
if(! this.target.cachedSize)
this.target.cachedSize = this.target.getBoundingClientRect();
before lib/src /paper-menu-button/paper-menu-button-overlay.html:L67 solves the issue
Apologies if this is part of a bigger safari/polymer issue. I noticed that clicking the button in the demo doesn't do anything in Safari and the button colors are black instead of white.
When you create an paper-menu-button with one item in it said item is never displayed.
On the sample at http://www.polymer-project.org/components/paper-menu-button/demo.html the menu button works only once in IE11. So when clicking it the first time the menu opens, but after the menu is closed a 2nd click doesn't open the menu again.
In Chrome the menu opens again - as expected - with the 2nd click.
In the demo, click the menu button rapidly a dozen or so times. This seems to put it in a bad state and all subsequent menu selection results in an 'Uncaught RangeError: Maximum call stack size exceeded' coming out of the core-overlay focus. Tested in Chrome 36 & 38.
When the animation begins, core-dropdown has no shadow because .paper-shadow-top-z-1 is changed to .paper-shadow-top-z-0 and after animation shadow appears. This looks really awkward and previous version doesn't have this problem. I noticed 2 div elements which have paper-shadow class was moved into core-dropdown( they were #overlayBg 's children elements before), and they don't have scale animation. Is this change intentional?
The menu flashes momentarily and disappears when accessed via iPhone 5 (latest update) Safari, and on Chrome running on a retina iPad mini (all latest updates applied).
The default demo page exhibits this bug:
http://www.polymer-project.org/components/paper-menu-button/demo.html
With upgrade of polymer to v 4 paper-menu-button with paper-item is not working properly in core-toolbar on the top right hand section .First time when i open it works fine but on subsequent clicks on menu item the width keep on decreasing.
Clicking on the button in the demo reveals menu items, but their background is transparent
Demo here: http://jsbin.com/fasoge/1/edit?html,output
lib/src/paper-menu-button/paper-menu-button-transition.html: L78
var nodes = window.ShadowDOMPolyfill ? Platform.queryAllShadows(node.querySelector('core-menu'), 'content').getDistributedNodes() : node.querySelector('core-menu::shadow content').getDistributedNodes().array();
should be
var nodes = window.ShadowDOMPolyfill ? Platform.queryAllShadows(node.querySelector('core-menu'), 'content').getDistributedNodes() : node.querySelector('core-menu content').getDistributedNodes().array();
as there is no shadow root between core-menu and content.
Change the overlay bg color:
paper-menu-button::shadow .paper-menu-button-overlay-bg {
background: green;
}
Change the ripple effect of the button:
paper-menu-button:shadow .paper-menu-button-overlay-ink {
background: red;
}
This is more of a question than an issue. I'm having difficulty determining what code is allowing for shadowing around the dropdown menu itself (such as shown on the demo). Can this be done without using paper-shadow for instance?
core-popup-menu has overflow: scroll and therefore the scrollbars are taking up the space on the right and bottom sides.
Take a look at the screenshot:
We simply fixed with
paper-menu-button::shadow #menu::shadow #menu { overflow: auto; }
But I'm thinking it might be a good idea to have another attribute in core-popup-menu to show/hide scrollbars?
Expected:
Experienced:
At present I can't click the hamburger menu to expand the menu.
Currently I'm adding the top & bottom padding manually using a shadow selector when using paper-menu-button. Should the padding here: http://www.google.com/design/spec/components/menus.html#menus-metrics - be built into the menu button?
Try the following demo in desktop Safari 7.0.6 http://www.polymer-project.org/components/paper-menu-button/demo.html
You'll notice the buttons are the wrong color (should be white, but they're black). And the is no overlay rendered when you click on the button.
AFAICT, these don't exist and throw errors when trying to install the element:
"core-transition-css": "Polymer/core-transition-css#master",
"paper-toolbar": "Polymer/paper-toolbar"
I've got a paper-menu-button using icon="add" that allows the user to select one type of a number of similar things to add to the document (more specifically, the button allows the user to add one of a number of different social network links to a document). While it's working great, it'd really be better if the component supported the label attribute and showed a text label off to the right. Otherwise it's just a + button with no explanation of what's being added.
I can see this label being useful more generally for non-"add" functionality, and have considered using it elsewhere in my project with a label.
It seems that only this component is not included in paper-elements, any reason for this?
It's a bit odd that when I use a twice that has a that the item stays selected after I click it, and when I reopen it, that one is still selected. You can observe this behavior in https://www.polymer-project.org/components/paper-menu-button/demo.html by clicking the first button.
In a regular drop-down field it may make sense to show the currently selected value, but in a (where you're not so much choosing a selection as just choosing one of many actions), showing the previous selection is confusing and strange.
Use of this component causes the following error in web-animation-js when trying to click the menu button to expand it
Uncaught TypeError: Cannot read property 'offset' of undefined web-animations.js:2244createObject._sampleForProperty web-animations.js:2244createObject._sample web-animations.js:2206createObject._sample web-animations.js:1346ticker web-animations.js:5512(anonymous function)
I have a polymer paper-menu-button in my html webpage, when the user clicks the button the many selections and the overflow appear, with the overflow handled by the scroll bar.
However, for some reason when the user tries to view the overflow via mouse button 1 and the scroll bar, when they release the mouse button 1 the paper-menu-button selection closes and you cannot see any selections anymore, just the button.
Is there a way to exclude clicks on the scroll-bar from closing the selection screen of the button?
I have tried these solutions
body /deep/ core-menu {
overflow-y:scroll;
}
body /deep/ core-menu {
overflow: visible;
}
Solution 1 does not change any behavior and solution 2 creates overflow to be displayed on button-press instead of on scroll.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.