search

handsontable / hot-table

Handsontable - Best Data Grid Web Component with Spreadsheet Look and Feel.
http://handsontable.github.io/hot-table/
MIT License
130 stars 36 forks source link

Problems running under Firefox and Safari WC polyfill #39

Closed pzingg closed 7 years ago

pzingg commented 7 years ago

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?

pzingg commented 7 years ago

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...

pzingg commented 7 years ago

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