handsontable / hot-table

Handsontable - Best Data Grid Web Component with Spreadsheet Look and Feel.

Home Page:http://handsontable.github.io/hot-table/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Problems running under Firefox and Safari WC polyfill

pzingg opened this issue · comments

I have been testing hot-table in Chrome, and it looks good, especially easy to integrate into a frontend project I'm working on in the Elm language. You have to specify Polymer.dom = 'shadow' before the component is loaded, otherwise basic functionality seems to be there.

However, under Firefox and Safari, where the Web Component importing is handled by the webcomponentsjs/webcomponents.js library, styles and positioning are severely off:

firefox-shadow

Row headers and column headers seem to be positioned absolute relative the the body element, grid lines are missing, and fonts, colors, etc. do not render properly. Here's what it looks like, correct, in Chrome:

chrome-shadow

Any possible fixes, or suggestions for me, if I'm thinking of fixing myself?

Found the solution. For the Safari and Firefox webcomponents.js, you have to add the described <style> element:

<style is="custom-style" include="hot-table-style">

Wish it were clearly described somewhere what this does, but anyway...

This is actually a duplicate of #23 - should have checked.