]> git.ipfire.org Git - thirdparty/Chart.js.git/commitdiff
Fix responsive in IE11 with padding as percentage (#4620)
authorandi-b <andi@bambeck.co.uk>
Sun, 22 Apr 2018 18:32:42 +0000 (19:32 +0100)
committerSimon Brunel <simonbrunel@users.noreply.github.com>
Sun, 22 Apr 2018 18:32:42 +0000 (20:32 +0200)
When the chart is responsive to the parent container, the calculations for padding assumes that the figure is in pixels so that 20% is taken to be 20 (pixels), which results in the chart exceeding the parent container. This appears to be an IE11 only issue.

src/core/core.helpers.js
test/specs/core.helpers.tests.js

index 6323e9ebffc77a6d826b47ec921d19c1aa48bebb..64e4180df4e20e0f42d03d855effd7db9cc290b0 100644 (file)
@@ -473,15 +473,25 @@ module.exports = function() {
        helpers.getConstraintHeight = function(domNode) {
                return getConstraintDimension(domNode, 'max-height', 'clientHeight');
        };
+       /**
+        * @private
+        */
+       helpers._calculatePadding = function(container, padding, parentDimension) {
+               padding = helpers.getStyle(container, padding);
+
+               return padding.indexOf('%') > -1 ? parentDimension / parseInt(padding, 10) : parseInt(padding, 10);
+       };
        helpers.getMaximumWidth = function(domNode) {
                var container = domNode.parentNode;
                if (!container) {
                        return domNode.clientWidth;
                }
 
-               var paddingLeft = parseInt(helpers.getStyle(container, 'padding-left'), 10);
-               var paddingRight = parseInt(helpers.getStyle(container, 'padding-right'), 10);
-               var w = container.clientWidth - paddingLeft - paddingRight;
+               var clientWidth = container.clientWidth;
+               var paddingLeft = helpers._calculatePadding(container, 'padding-left', clientWidth);
+               var paddingRight = helpers._calculatePadding(container, 'padding-right', clientWidth);
+
+               var w = clientWidth - paddingLeft - paddingRight;
                var cw = helpers.getConstraintWidth(domNode);
                return isNaN(cw) ? w : Math.min(w, cw);
        };
@@ -491,9 +501,11 @@ module.exports = function() {
                        return domNode.clientHeight;
                }
 
-               var paddingTop = parseInt(helpers.getStyle(container, 'padding-top'), 10);
-               var paddingBottom = parseInt(helpers.getStyle(container, 'padding-bottom'), 10);
-               var h = container.clientHeight - paddingTop - paddingBottom;
+               var clientHeight = container.clientHeight;
+               var paddingTop = helpers._calculatePadding(container, 'padding-top', clientHeight);
+               var paddingBottom = helpers._calculatePadding(container, 'padding-bottom', clientHeight);
+
+               var h = clientHeight - paddingTop - paddingBottom;
                var ch = helpers.getConstraintHeight(domNode);
                return isNaN(ch) ? h : Math.min(h, ch);
        };
index eb96ef8c745bc55c84198d623bf33aa316f9275a..3c471b505100049d6746c5205d31b5b042747e95 100644 (file)
@@ -746,6 +746,36 @@ describe('Core helper tests', function() {
                expect(canvas.style.width).toBe('400px');
        });
 
+       it ('Should get padding of parent as number (pixels) when defined as percent (returns incorrectly in IE11)', function() {
+
+               // Create div with fixed size as a test bed
+               var div = document.createElement('div');
+               div.style.width = '300px';
+               div.style.height = '300px';
+               document.body.appendChild(div);
+
+               // Inner DIV to have 10% padding of parent
+               var innerDiv = document.createElement('div');
+
+               div.appendChild(innerDiv);
+
+               var canvas = document.createElement('canvas');
+               innerDiv.appendChild(canvas);
+
+               // No padding
+               expect(helpers.getMaximumWidth(canvas)).toBe(300);
+
+               // test with percentage
+               innerDiv.style.padding = '10%';
+               expect(helpers.getMaximumWidth(canvas)).toBe(240);
+
+               // test with pixels
+               innerDiv.style.padding = '10px';
+               expect(helpers.getMaximumWidth(canvas)).toBe(280);
+
+               document.body.removeChild(div);
+       });
+
        describe('Color helper', function() {
                function isColorInstance(obj) {
                        return typeof obj === 'object' && obj.hasOwnProperty('values') && obj.values.hasOwnProperty('rgb');