Search code examples
jquerypolymerpolymer-1.0gridster

polymer + jquery gridster

I am trying to create a polymer component out of jquery gridster. Here is my basic shell for the component.

<link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="grid-layout">
<style>
   ul {
    list-style-type: none;
   }
   li {
    background-color: #FF0000
   }
</style>
  <template>
    <div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li> 
        <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li> 
    </ul>
   </div>
  </template>
  <script>
  Polymer({
    is: 'grid-layout', 
    attached: function() {
    this.async(function() {

      $(".gridster ul").gridster({
        widget_margins: [10, 10],
        widget_base_dimensions: [150, 150]
      });

    });
   }
  });
  </script>
</dom-module>

And I am trying to use it as

<body class="fullbleed layout vertical">
  <paper-drawer-panel force-narrow> 
      <div drawer>
        <paper-menu>
                <paper-item>Item 1</paper-item>
                <paper-item>Item 2</paper-item>
            </paper-menu>
      </div>    
      <div main>
        <paper-toolbar>
          <iron-icon icon="menu" paper-drawer-toggle></iron-icon>           
        </paper-toolbar>
        <grid-layout></grid-layout>
      </div>
  </paper-drawer-panel>    
</body>

The issue I have is the drawer panel is sliding under the jquery webcomponent instead of over it. Am I mssing any jquery+polymer gotcha ?

enter image description here

Solution

  • Gridster declares it's rows to be z-index: 2 and therefore above the standard stacking plane. You can defeat this with

    .gridster .gs-w {
  z-index: 0;
}

    but I don't know why they did that in the first place so there may be some other side-effect from changing the z-index.

    http://jsbin.com/kiziho/edit?html,output