archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Fix responsive in IE11 with padding as percentage (#4620)

Browse Source 
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.
This commit is contained in:
andi-b 2018-04-22 19:32:42 +01:00 committed by Simon Brunel
parent 85169c5603
commit 73b8ceeb35
2 changed files with 48 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/core/core.helpers.js
View 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);
};

30
test/specs/core.helpers.tests.js
View 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');