Consider vertical margins. Closes #78

NeXTs · Sep 12, 2016 · 6a16567 · 6a16567
1 parent f4a9fd0
commit 6a16567
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 15 deletions.
diff --git a/clusterize.css b/clusterize.css
@@ -6,6 +6,15 @@
   overflow: auto;
 }
 
+/**
+ * Avoid vertical margins for extra tags
+ * Necessary for correct calculations when rows have nonzero vertical margins
+ */
+.clusterize-extra-row{
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
 /* By default extra tag .clusterize-keep-parity added to keep parity of rows.
  * Useful when used :nth-child(even/odd)
  */
@@ -21,7 +30,7 @@
     outline: 0;
 }
 
-/* centering message that appears when no data provided
+/* Centering message that appears when no data provided
  */
 .clusterize-no-data td{
   text-align: center;

diff --git a/clusterize.js b/clusterize.js
@@ -1,4 +1,4 @@
-/*! Clusterize.js - v0.16.1 - 2016-08-16
+/*! Clusterize.js - v0.17.0 - 2016-09-12
 * http://NeXTs.github.com/Clusterize.js/
 * Copyright (c) 2015 Denis Lukov; Licensed GPLv3 */
 
@@ -185,10 +185,17 @@
       opts.cluster_height = 0
       if( ! rows.length) return;
       var nodes = this.content_elem.children;
-      opts.item_height = nodes[Math.floor(nodes.length / 2)].offsetHeight;
+      var node = nodes[Math.floor(nodes.length / 2)];
+      opts.item_height = node.offsetHeight;
       // consider table's border-spacing
       if(opts.tag == 'tr' && getStyle('borderCollapse', this.content_elem) != 'collapse')
         opts.item_height += parseInt(getStyle('borderSpacing', this.content_elem), 10) || 0;
+      // consider margins (and margins collapsing)
+      if(opts.tag != 'tr') {
+        var marginTop = parseInt(getStyle('marginTop', node), 10) || 0;
+        var marginBottom = parseInt(getStyle('marginBottom', node), 10) || 0;
+        opts.item_height += Math.max(marginTop, marginBottom);
+      }
       opts.block_height = opts.item_height * opts.rows_in_block;
       opts.rows_in_cluster = opts.blocks_in_cluster * opts.rows_in_block;
       opts.cluster_height = opts.blocks_in_cluster * opts.block_height;

diff --git a/clusterize.min.js b/clusterize.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "clusterize.js",
-  "version": "0.16.1",
+  "version": "0.17.0",
   "description": "Tiny vanilla JS plugin to display large data sets easily",
   "main": "clusterize.js",
   "style": "clusterize.css",