fixed errors around inherited css

TonyGermaneri · Nov 30, 2016 · 4f8565c · 4f8565c
1 parent aaadeb6
commit 4f8565c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "canvas-datagrid",
   "main": "lib/main.js",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "ignore": [
     "**/.*",
     "node_modules",

diff --git a/lib/main.js b/lib/main.js
@@ -44,10 +44,11 @@ define([], function context() {
                 ['contextMenuLabelDisplay', 'inline-block'],
                 ['contextMenuLabelMinWidth', '75px'],
                 ['contextMenuHoverBackground', 'rgba(182, 205, 250, 1)'],
+                ['contextMenuColor', 'rgba(43, 48, 43, 1)'],
                 ['contextMenuHoverColor', 'rgba(43, 48, 153, 1)'],
                 ['contextMenuFontSize', '16px'],
                 ['contextMenuFontFamily', 'sans-serif'],
-                ['contextMenuBackground', 'rgba(222, 227, 233, 0.90)'],
+                ['contextMenuBackground', 'rgba(222, 227, 233, 0.94)'],
                 ['contextMenuBorder', 'solid 1px rgba(158, 163, 169, 1)'],
                 ['contextMenuPadding', '2px'],
                 ['contextMenuBorderRadius', '3px'],
@@ -988,8 +989,8 @@ define([], function context() {
                 cell = visibleCells.filter(function (vCell) {
                     return vCell.columnIndex === x && vCell.rowIndex === y;
                 })[0];
-                top = container.getBoundingClientRect().top + cell.y + style.cellBorderWidth;
-                left = container.getBoundingClientRect().left + cell.x + style.cellBorderWidth;
+                top = cell.y + style.cellBorderWidth;
+                left = cell.x + style.cellBorderWidth;
                 scrollEdit = {
                     scrollTop: scrollBox.scrollTop,
                     scrollLeft: scrollBox.scrollLeft,
@@ -1328,14 +1329,16 @@ define([], function context() {
         }
         function attachCss() {
             var styleSheet, css = [
-                '.canvas-datagrid-edit-textarea { outline: none; margin: 0; padding: 0 0 0 <cellPaddingLeft>px;',
+                '.canvas-datagrid-scrollBox { overflow: auto; z-index: 1; }',
+                '.canvas-datagrid { box-sizing: content-box!important; padding: 0!important; background: <backgroundColor>;}',
+                '.canvas-datagrid-edit-textarea { box-sizing: content-box!important; outline: none; margin: 0; padding: 0 0 0 <cellPaddingLeft>px;',
                 'font-size: <editCellFontSize>; font-family: <editCellFontFamily>; }',
                 '.canvas-datagrid-context-menu-item { margin: <contextMenuItemMargin>; border-radius: <contextMenuItemBorderRadius>; }',
                 '.canvas-datagrid-context-menu-item:hover { background: <contextMenuHoverBackground>;',
                 ' color: <contextMenuHoverColor>; margin: <contextMenuItemMargin>; }',
                 '.canvas-datagrid-context-menu-label { display: <contextMenuLabelDisplay>; min-width: <contextMenuLabelMinWidth>; }',
                 '.canvas-datagrid-context-menu { font-family: <contextMenuFontFamily>;',
-                'font-size: <contextMenuFontSize>; background: <contextMenuBackground>;',
+                'font-size: <contextMenuFontSize>; background: <contextMenuBackground>; color: <contextMenuColor>;',
                 'border: <contextMenuBorder>; padding: <contextMenuPadding>;',
                 ' border-radius: <contextMenuBorderRadius>; opacity: <contextMenuOpacity>;}',
                 '.canvas-datagrid-invalid-search-regExp { background: <contextMenuFilterInvalidExpresion>; }'
@@ -1363,10 +1366,8 @@ define([], function context() {
             scrollArea = document.createElement('div');
             canvas = document.createElement('canvas');
             ctx = canvas.getContext('2d');
-            container.style.padding = '0';
-            container.style.backgroundColor = style.backgroundColor;
-            scrollBox.style.overflow = 'auto';
-            scrollBox.style.zIndex = '1';
+            container.className = 'canvas-datagrid';
+            scrollBox.className = 'canvas-datagrid-scrollBox';
             [scrollBox, canvas, controlInput].forEach(function eachEle(el) {
                 el.style.position = 'absolute';
             });