Polymer stylistic element.

Question

Polymer stylistic element.

I'm currently trying to integrate SlickGrid into a polymer element and have some style issues.

The original SlickGrid example with a very primitive CSS style looks different when I insert it into a polymer element.

Code without polymer:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>SlickGrid example 1: Basic grid</title>
  <style>
      .slick-cell, .slick-headerrow-column {
          position: absolute;
          border: 1px solid transparent;
          border-right: 1px dotted silver;
          border-bottom-color: silver;
          overflow: hidden;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
          vertical-align: middle;
          z-index: 1;
          padding: 1px 2px 2px 1px;
          margin: 0;
          white-space: nowrap;
          cursor: default;
      }
  </style>
</head>
<body>
<table width="100%">
  <tr>
    <td valign="top" width="50%">
      <div id="myGrid" style="width:600px;height:500px;"></div>
    </td>
    <td valign="top">
      <h2>Demonstrates:</h2>
      <ul>
        <li>basic grid with minimal configuration</li>
      </ul>
    </td>
  </tr>
</table>

<script src="../lib/jquery-1.7.min.js"></script>
<script src="../lib/jquery.event.drag-2.2.js"></script>

<script src="../slick.core.js"></script>
<script src="../slick.grid.js"></script>

<script>
  var grid;
  var columns = [
    {id: "title", name: "Title", field: "title"},
    {id: "duration", name: "Duration", field: "duration"},
    {id: "%", name: "% Complete", field: "percentComplete"},
    {id: "start", name: "Start", field: "start"},
    {id: "finish", name: "Finish", field: "finish"},
    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
  ];

  var options = {
    enableCellNavigation: true,
    enableColumnReorder: false
  };

  $(function () {
    var data = [];
    for (var i = 0; i < 500; i++) {
      data[i] = {
        title: "Task " + i,
        duration: "5 days",
        percentComplete: Math.round(Math.random() * 100),
        start: "01/01/2009",
        finish: "01/05/2009",
        effortDriven: (i % 5 == 0)
      };
    }

    grid = new Slick.Grid("#myGrid", data, columns, options);
  })
</script>
</body>
</html>

Screenshot

Polymer Code:

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


<polymer-element name="polymer-slickgrid">
    <template>
        <style>
            .slick-cell, .slick-headerrow-column {
                position: absolute;
                border: 1px solid transparent;
                border-right: 1px dotted silver;
                border-bottom-color: silver;
                overflow: hidden;
                -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
                vertical-align: middle;
                z-index: 1;
                padding: 1px 2px 2px 1px;
                margin: 0;
                white-space: nowrap;
                cursor: default;
            }

        </style>
        <div id="slickGrid" style="width:600px;height:500px;"></div>
    </template>
    <script src="bower_components/slickgrid/lib/jquery-1.7.min.js"></script>
    <script src="bower_components/slickgrid/lib/jquery.event.drag-2.2.js"></script>

    <script src="bower_components/slickgrid/slick.core.js"></script>
    <script src="bower_components/slickgrid/slick.grid.js"></script>
    <script>
        Polymer('polymer-slickgrid', {
            domReady: function(){
                var grid;
                var columns = [
                    {id: "title", name: "Title", field: "title"},
                    {id: "duration", name: "Duration", field: "duration"},
                    {id: "%", name: "% Complete", field: "percentComplete"},
                    {id: "start", name: "Start", field: "start"},
                    {id: "finish", name: "Finish", field: "finish"},
                    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
                ];

                var options = {
                    enableCellNavigation: true,
                    enableColumnReorder: false
                };
                var self = this;
                $(function () {
                    var data = [];
                    for (var i = 0; i < 500; i++) {
                        data[i] = {
                            title: "Task " + i,
                            duration: "5 days",
                            percentComplete: Math.round(Math.random() * 100),
                            start: "01/01/2009",
                            finish: "01/05/2009",
                            effortDriven: (i % 5 == 0)
                        };
                    }
                    var element = self.$.slickGrid;
                    var grid = new Slick.Grid(element, data, columns, options);
                })
            }

        });
    </script>
</polymer-element>

Using an item

<html>
<head lang="en">
    <script src="bower_components/platform/platform.js"></script>
    <link rel="import" href="polymer-slickgrid.html">
</head>
<body>
<polymer-slickgrid></polymer-slickgrid>
</body>
</html>

Screenshot

Edit

It seems that the cell style is applied, but the lines have different style information when they are used inside the polymer element.

CSS screenshot without polymer

Screenshot of a SlickGrid element inside a Polymer element

+4

html css polymer slickgrid

Eggi Jul 03 '14 at 9:27

source share

1 answer

badsyntax · Accepted Answer · 2014-07-03T12:20:50+0000

, <polymer-slickgrid> . . : http://www.polymer-project.org/articles/styling-elements.html#element-defined-styles

:

<style>
  :host {
    /* Note: by default elements are always display:inline. */
    display: block;
  }
</style>

.. "block", : <polymer-slickgrid block>

[]

, <head>, , .

: https://github.com/mleibman/SlickGrid/blob/e6e2f88f832742c44e0fabf1f3864e5176386033/slick.grid.js#L921

, :

var styles = [];
var styleSheets = window.document.styleSheets;
$.each(styleSheets, function(i, sheet) {
    var sheet = styleSheets[i];
    if (sheet.cssRules) {
        $.each($.makeArray(sheet.cssRules), function(i, rule) {
            if (rule.cssText && /slickgrid/.test(rule.cssText)) {
                styles.push(rule.cssText);
            }
        })
    }
});

var inlineStyles = '';
$.each(styles, function(i, style) {
    inlineStyles += (style + "\n");
});
inlineStyles = '<style type="text/css">' + inlineStyles + '</style>';
$(this.$.slickGrid).before(inlineStyles);

, , , POC. var grid = new Slick.Grid(element, data, columns, options);

, ( jquery ui slick.grid ):

Polymer stylistic element.

Code without polymer:

Polymer Code:

Edit

More articles: