polymer paper-shadow doesnt show

Question

I have gone over some of the starter projects as well as looking at some of the code for itshackademic.com and have begun working on my own project by taking bits and pieces, but my background isnt html so the different elements and how they line up become a bit difficult at times. I am trying to achieve getting a paper-shadow to show when on-mouseoover occurs and through the binding i can see that the value has changed, but the shadow doesnt ever show.

the main page is executing a template with the following

<div id="side">
       <core-selector id="waypointSelector" on-core-activate="{{coreSelect}}">
        <template repeat="{{waypoint in response.waypoints}}">
        <waypoint-card  waypoint={{waypoint}} ></waypoint-card>
     </template>
   </core-selector>
 </div>

and then my card looks like the following

<polymer-element name="waypoint-card" attributes="waypoint z" on-tap="{{togglePanel}}" on-mouseover="{{onMouseOver}}" on-mouseout="{{onMouseOut}}" >
<template>
 <template if="{{open}}">
  <core-icon class="red" icon="maps:place" ></core-icon>
 </template>
 <span>Name: {{waypoint.name}} Title: {{waypoint.title}}</span>
 <template if="{{open}}">
 <div vertical layout>
 <div horizontal layout center><h2>Latitude:</h2><span class="location"> {{waypoint.lat}}</span>
</div>
<div horizontal layout center><h2>Longitude:</h2><span class="location"> {{waypoint.lng}}</span>
 </div>
<paper-button raised class="colored" on-tap={{onTap}}>Delete</paper-button>
</div>
</template>
<paper-shadow id="shadow" class="waypoint-shadow"  z={{z}} ></paper-shadow>

</template>

My problem is that when i mouse over the element, the side of the paper-shadow doesnt seem to change nor does it show up.

I recommend you add the relevant code to jsbin or similar & provide the link. There are quite a few pieces missing here (like JavaScript, element imports, etc) that could be causing your issue. — sfeast
the jsbin is jsbin.com/danecocehe/1/edit?html,css,js,output. I havent worked with jsbin much so i dont exactly know how to make everything work in it. — Mookie

smokybob smokybob · Accepted Answer · 2014-11-13T19:37:23

I suppose in the bower.json file the dependencies looks like this:

"dependencies": {
    "polymer": "Polymer/polymer#master",
    "core-elements": "Polymer/core-elements#master",
    "paper-elements": "Polymer/paper-elements#master"
  }

If so the version of paper-shadow you are using is v0.5.* (as of today) and from 0.5.0 the element is now a container instead of targeting another element (official release notes).

So to fix your code you now need to put the content inside the paper-shadow

<polymer-element name="waypoint-card" attributes="waypoint z" on-tap="{{togglePanel}}" on-mouseover="{{onMouseOver}}" on-mouseout="{{onMouseOut}}" >
<template>
  <paper-shadow id="shadow" class="waypoint-shadow"  z={{z}} >
    <template if="{{open}}">
      <core-icon class="red" icon="maps:place" ></core-icon>
    </template>
    <span>Name: {{waypoint.name}} Title: {{waypoint.title}}</span>
    <template if="{{open}}">
      <div vertical layout>
        <div horizontal layout center><h2>Latitude:</h2><span class="location"> {{waypoint.lat}}</span>
        </div>
        <div horizontal layout center><h2>Longitude:</h2><span class="location"> {{waypoint.lng}}</span>
        </div>
        <paper-button raised class="colored" on-tap={{onTap}}>Delete</paper-button>
      </div>
    </template>
  </paper-shadow>
</template>
</polymer-element>

Other than that everything should be working fine.

polymer paper-shadow doesnt show

1 Answers