Chart.js: Parent container with percentage for padding not working in IE11

[andi-b]

I have a parent container that has no width, but 10% padding. Works fine in most browsers with exception of IE11. Anyway, I've narrowed it down to and fixed it with the following. Sorry I would do a pull request/submit a change, but haven't done it before. Cheers.

helpers.getMaximumWidth = function(domNode) {
        var container = domNode.parentNode;
        var paddingLeft = helpers.getStyle(container, 'padding-left');
        var paddingRight = helpers.getStyle(container, 'padding-right');

        if (paddingLeft.indexOf('%') > -1)
            paddingLeft = container.clientWidth / parseInt(paddingLeft, 10);
        else
            paddingLeft = parseInt(paddingLeft, 10);

        if (paddingRight.indexOf('%') > -1)
            paddingRight = container.clientWidth / parseInt(paddingRight, 10);
        else
            paddingRight = parseInt(paddingRight, 10);

        var w = container.clientWidth - paddingLeft - paddingRight;
        var cw = helpers.getConstraintWidth(domNode);
        return isNaN(cw)? w : Math.min(w, cw);
    };

[etimberg]

@andi-b this would make a good PR. I found some good docs on how to make a PR if you're interested

[andi-b]

Thanks @etimberg , I'll see if I can find some time to go through it and get it done later

[etimberg]

@simonbrunel @kurkle @nagix @benmccann what do you think about the solution proposed above?

[benmccann]

It seems the surrounding code has changed since this was reported, so it's a little difficult to tell exactly what change is being proposed. It looks like the change would be to _calculatePadding: https://github.com/chartjs/Chart.js/blob/e07c5d0c6c39e621fbe79de39d6e2de66da1cd9a/src/core/core.helpers.js#L466

Instead of:

parentDimension * parseInt(padding, 10) / 100

It would do:

parentDimension / parseInt(padding, 10)

I don't see how that would work or what it's fixing

[etimberg]

@benmccann I looked at this just now as well. Not sure why this fix changes anything, as the math should work out identically. I tested again in IE11 using the latest code from master. I set the padding on the canvas container to '10%'. The chart was identical in IE11 and FireFox so I'm calling this resolved