Paper-dropdown-menu error in observe.js

Question

When trying to replicate the paper-dropdown-menu that works so great on polymers website on my apache2 server I am getting this error. When the dropdown button is pressed.

Exception caught during observer callback: TypeError: Cannot read property 'margin' of undefined
at core-dropdown-overlay.Polymer.positionTarget (http://localhost/components/core-dropdown/core-dropdown-overlay.html:125:26)
at core-dropdown-overlay.Polymer.updateTargetDimensions (http://localhost/components/core-overlay/core-overlay.html:445:12)
at core-dropdown-overlay.Polymer.prepareRenderOpened (http://localhost/components/core-overlay/core-overlay.html:347:14)
at core-dropdown-overlay.Polymer.openedChanged (http://localhost/components/core-overlay/core-overlay.html:306:12)
at core-dropdown-overlay.g.invokeMethod (http://localhost/components/polymer/polymer.js:12:13312)
at core-dropdown-overlay.g.notifyPropertyChanges (http://localhost/components/polymer/polymer.js:12:11598)
at Object.Observer.report_ (http://localhost/components/platform/platform.js:12:12614)
at Object.createObject.check_ (http://localhost/components/platform/platform.js:12:18112)
at c (http://localhost/components/platform/platform.js:12:5465)

HTML

<!doctype html>
<html>

<head>
    <!-- Style Sheets -->
    <!--  <LINK REL=StyleSheet HREF="css/viewer.css" TITLE="ViewerPage"> -->

    <!-- Dependencies -->

     <!-- Polymer Dependencies -->
    <script src="components/platform/platform.js"></script>

    <link rel="import" href="components/paper-dropdown-menu/paper-dropdown-menu.html">
    <link rel="import" href="components/core-elements/core-elements.html">
    <link rel="import" href="components/paper-elements/paper-elements.html">

</head>

<body>
      <paper-dropdown-menu selected="Financier" valueattr="label">
      <paper-item label="Croissant"></paper-item>
      <paper-item label="Donut"></paper-item>
      <paper-item label="Financier"></paper-item>
      <paper-item label="Madeleine"></paper-item>
    </paper-dropdown-menu>
</body>
</html>

When the button is pressed, no other values can be seen or selected.It simply renders as the Financier in a small box with some of the first paper-item viewable.

I have installed all the above dependencies using bower and the commands found on polymer, from what I understand it is suppose to handle dependency issues for me, so I seem to be at a loss as to why I have the above error.

EDIT:

Upon further research it appears this line of code is breaking in components/core-dropdown/core-dropdown-overlay.html:125:26

var dims = this.dimensions;
var margin = dims.margin;

Import order is important for subclassing. I don't know if it will help in this case, but try putting the import for paper-dropdown-menu.html after the import for paper-elements.html. — Scott Miles
I am also seeing this error, even with the stock paper-menu-button demo (polymer-project.org/components/paper-menu-button/demo.html). As with OP, it only occurs when serving the file from a local webserver. — Eric Nguyen
(This is with Polymer v0.4.1, same as is currently running on the polymer-project site at the moment.) — Eric Nguyen
Addtional note: core-overlay is unaffected, but any element depending on core-dropdown-overlay shows this error. — Eric Nguyen
Polymer is a pure client-side technology, so it's unlikely the server has to do with it. In any case, you should make a bug report here: github.com/polymer/paper-menu-button/issues — Scott Miles

user2778525 user2778525 · Accepted Answer · 2014-10-25T01:09:34

Adam,

this is probably because the Polymer components installed on your web server are an older version (eg. this occurs with 0.3.5 components) than those on the Polymer site. You can check your version in the header of the polymer.js file.

To fix this, first download the latest (0.4.2) components.

Once you upgrade to 0.4.2 you may get the following error:

Uncaught TypeError: undefined is not a function

This is because the version of core-overlay.html included in the current paper-dropdown-menu download has a typo:

Polymer.flush();

Copy the latest code from view-source:https://www.polymer-project.org/components/core-overlay/core-overlay.html to correct this to:

Platform.flush();

Paper-dropdown-menu error in observe.js

1 Answers