Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

stylesheet variable is undefined in Chrome

See original GitHub issue

Got this error when tried to use forceFitColumns option in Chrome (v 14.0.835.202 m)

Apparently, appending <style> to <head> does not add the CSSStyleSheet object to document.styleSheets, and findCssRule(selector) fails because stylesheet variable is undefined.

Checked, it works in Opera and IE, so looks like a Chrome bug, didn’t find a good solution…

Issue Analytics

State:
Created 12 years ago
Comments:50 (10 by maintainers)

Top GitHub Comments

4reactions

Maheshkumar-Kakadecommented, Feb 7, 2014

While dynamically creating style and style rule via text node, Google Chrome does not add stylesheet to document.styleSheets immediately. As dynamic stylesheet doesn’t exist getColumnCssRules() throws “Cannot find stylesheet.” exception. To fix this I have added css rule vai JS. This works on (chrome,firefox and IE)

Modify createCssRules() and add new function addCSSRule. addCSSRule force browser to create stylesheet under document.styleSheets.


    function createCssRules() {
      $style = $("<style type='text/css' rel='stylesheet' />").appendTo($("head"));
      var rowHeight = (options.rowHeight - cellHeightDiff);
      if ($style[0].styleSheet) { // IE
        $style[0].styleSheet.cssText = "";
      } else {
        $style[0].appendChild(document.createTextNode(""));
      }
        var sheet =  $style[0].sheet;
        var index = 0;
        addCSSRule(sheet,"." + uid + " .slick-header-column", "left: 1000px;",index++);
        addCSSRule(sheet,"." + uid + " .slick-top-panel", "height:" + options.topPanelHeight + "px;",index++);
        addCSSRule(sheet,"." + uid + " .slick-headerrow-columns", "height:" + options.headerRowHeight + "px;",index++);
        addCSSRule(sheet,"." + uid + " .slick-cell", "height:" + rowHeight + "px;",index++);
        addCSSRule(sheet,"." + uid + " .slick-row", "height:" + options.rowHeight + "px;",index++);

        for (var i = 0; i < columns.length; i++) {
            addCSSRule(sheet,"." + uid + " .l" + i , "",index++);
            addCSSRule(sheet,"." + uid + " .r" + i, "",index++);
          }
    }

    function addCSSRule(sheet, selector, rules, index) {
        if(sheet.insertRule) {
            sheet.insertRule(selector + "{" + rules + "}", index);
        }
        else {
            sheet.addRule(selector, rules, index);
        }
    }

0reactions

prashantbusacommented, May 22, 2014

Thanks Maheshkumar !!! It resolved my issue…