From 3f79e6cce4d362ebf69262311be09deadef33df2 Mon Sep 17 00:00:00 2001 From: Allan Jardine Date: Sun, 4 Aug 2013 09:26:02 +0100 Subject: [PATCH] Fix: box-sizing: border-box would cause column misalignment when scrolling - It is far from uncommon to do `* { box-sizing: border-box; }` at the top of your CSS these days, including in frameworks, but this could cause DataTables a little bit of a problem when scrolling both horizontally and vertically since the padding it adds to the header linear element to allow it to scroll over the vertical scrollbar would be folded into the width of the div linear, rather than added to it. - Fix is to simply set the box-sizing for the linear. I've decided to do this in Javascript rather than CSS since it is going to be needed regardless of the CSS being used. --- .datatables-commit-sync | 2 +- media/js/jquery.dataTables.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.datatables-commit-sync b/.datatables-commit-sync index 3a64f532..44b0effc 100644 --- a/.datatables-commit-sync +++ b/.datatables-commit-sync @@ -1 +1 @@ -cbadecf7c8c87fa07a5634861d1c162e5117a0cb +f799420905648a780426600e304c31cc82e1e56d diff --git a/media/js/jquery.dataTables.js b/media/js/jquery.dataTables.js index 53a3a63f..83677f1e 100644 --- a/media/js/jquery.dataTables.js +++ b/media/js/jquery.dataTables.js @@ -3009,6 +3009,7 @@ nScrollHead.style.border = "0"; nScrollHead.style.width = "100%"; nScrollFoot.style.border = "0"; + nScrollHeadInner.style.boxSizing = 'content-box'; nScrollHeadInner.style.width = oSettings.oScroll.sXInner !== "" ? oSettings.oScroll.sXInner : "100%"; /* will be overwritten */